重点学问

拖放事宜

拖动某元素时，会在被拖动元素上以此触发以下事宜：

• dragstart:当拖拽元素最先被拖拽的时刻触发的事宜

• drag:当拖拽元素的过程当中一向触发的事宜

• dragend：当拖拽完成后触发的事宜

当某个元素被拖放到一个有用的安排目的上时，安排目的上回顺次触发以下事宜：

• dragenter:当拖曳元素进入目的元素的时刻触发的事宜

• dragover:拖拽元素在目的元素上挪动的时刻触发的事宜

• dragleave:当拖曳元素脱离目的元素的时刻触发的事宜

• drop:被拖拽的元素在目的元素上同时鼠标摊开触发的事宜

自定义安排目的：

在拖放元素经由某些无效安排目的时，能够看到一种特别的光标(圆环中有一条反斜线)，示意不能安排。虽然一切元素都支撑安排目的事宜，但这些元素默许是不允许安排的。如果拖动元素经由不允许安排的元素，不管用户怎样操纵，都不会触发drop事宜。不过，你能够把任何元素变成有用的安排目的，要领是：重写dragenter和dragover事宜的默许行动。

比方，如果一个ID为“droptarget”的div元素，能够用以下代码将它变成一个安排目的

var droptarget = document.getElementById('droptarget')
droptarget.addEventListener('dragover', function(event){
    event.preventDefault()
}
droptarget.addEventListener('dragenter', function(event){
    event.preventDefault()
}

dataTransfer对象

dataTransfer对象，它是事宜对象的一个属性，用于从被拖放元素向安排目的通报字符串花样的数据。

detaTransfer对象有两个重要要领：getData()和setData()。setData()要领的第一个参数，也是getData()要领的唯一的一个参数，是一个字符串，示意保留的数据类型，取值为“text”和“URL”

event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

• 注重：保留在dataTransfer对象中的数据只能在drop事宜处置惩罚顺序中读取。

可拖动

默许情况下，只要图象、链接、文本是能够拖动的。让其他元素能够拖放也是能够的。HTML5为一切HTML元素划定了一个draggable属性，示意元素是不是能够拖动。图象和链接的draggable属性自动设置成了true，而其他元素这个属性的默许值都是false。经由过程设置这个属性能够使其他元素可拖动

<div draggable="true">...</div>

相干实例

<div class="dustbin">
  <br/>垃<br/>圾<br/>桶
</div>
<div class="dragbox">
  <div class="drag-item" draggable="true">item 1</div>
  <div class="drag-item" draggable="true">item 2</div>
  <div class="drag-item" draggable="true">item 3</div>
  <div class="drag-item" draggable="true">item 4</div>
  <div class="drag-item" draggable="true">item 5</div>
</div>
<div class="dragremind"></div>

var dustbin = document.querySelector('.dustbin');
var draglist = document.getElementsByClassName('drag-item');
var remind = document.querySelector('.dragremind');
var dragElem = null;

for(var i=0;i<draglist.length;i++){
  draglist[i].addEventListener("drag", function(event){
    event.dataTransfer.effectAllowed = "move";
    dragElem = event.target;
  });
  
}

dustbin.addEventListener("dragover", function(event){
  event.preventDefault();
});

dustbin.addEventListener("dragenter", function(event){
  event.preventDefault();
  this.style.color = "#fff";
});
dustbin.addEventListener("dragleave", function(event){
  this.style.color = "#000";
});

dustbin.addEventListener("drop", function(event){
  if(dragElem){
    remind.innerText = dragElem.innerText;
    dragElem.parentElement.removeChild(dragElem);
    this.style.color = "#000";
  }
});

参考资料

《JavaScript高等顺序设计》

HTML5 drag & drop 拖拽与拖放简介