重点知识

拖放事件

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

• 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。通过设置这个属性可以使其他元素可拖动

    
     ...
    

相关实例

    
  
     
垃
     
圾
     
桶
    
    
  
     
      item 1
     
  
     
      item 2
     
  
     
      item 3
     
  
     
      item 4
     
  
     
      item 5
     
    
    

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

参考资料

《JavaScript高级程序设计》