A Pen by nobu19711208

Thumbnail
This awesome code was written by nobu19711208, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nobu19711208 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  nobu19711208</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset=utf-8>
<title>ドラッグ&ドロップ サンプル</title>
<style>
</style>


          <script src="https://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
        <script src="https://code.ionicframework.com/1.1.0/js/angular/angular-resource.js"></script>
<script>
</script>

</head>
<body>

<p>好きな果物は何ですか?</p>
<div id="fruits" ondragover="f_dragover(event)" ondrop="f_drop(event)">
<img src="http://www.htmq.com/dnd/sample/images/apple.gif" id="apple" alt="りんご" draggable="false" ondragstart="f_dragstart(event)">
<img src="http://www.htmq.com/dnd/sample/images/orange.gif" id="orange" alt="みかん" draggable="true" ondragstart="f_dragstart(event)">
<img src="http://www.htmq.com/dnd/sample/images/grape.gif" id="grape" alt="ぶどう" draggable="true" ondragstart="f_dragstart(event)">
</div>

<p>下のボックスに入れてください。</p>
<div id="dropbox" ondragover="f_dragover(event)" ondrop="f_drop(event)">
</div>

</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nobu19711208/a-pen-by-nobu19711208-OyOQmj */
#fruits {
  /*単なるスタイリング*/
  width:500px; height:100px; margin:20px; background-color:#FF9966; border:1px solid #cc3333;
}
#dropbox {
  /*単なるスタイリング*/
  width:500px; height:100px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;
  /*以下はwebkit系ブラウザでドラッグ&ドロップを動かすための指定(ブラウザのサポートが進めば、必要なくなると思われます)*/
  -khtml-user-drag: element;
}


/*Downloaded from https://www.codeseek.co/nobu19711208/a-pen-by-nobu19711208-OyOQmj */
/***** ドラッグ開始時の処理 *****/
function f_dragstart(event){
  //ドラッグするデータのid名をDataTransferオブジェクトにセット
  event.dataTransfer.setData("text", event.target.id);
}

/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function f_dragover(event){
  //dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
  event.preventDefault();
}

/***** ドロップ時の処理 *****/
function f_drop(event){
  //ドラッグされたデータのid名をDataTransferオブジェクトから取得
  var id_name = event.dataTransfer.getData("text");
  //id名からドラッグされた要素を取得
  var drag_elm =document.getElementById(id_name);
  //ドロップ先にドラッグされた要素を追加
  event.currentTarget.appendChild(drag_elm);
  //エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
  event.preventDefault();
}

Comments