HTML的元素一般都是静止状态，但交互离不开元素的可拖动性，因此，HTML5引入了 draggable 属性。draggable源于动词 drag，拖动，able 作为形容词后缀，表示可以、能够等意思，draggable就是可拖动的之意（注意g要双写）。

当web元素拥有 draggable="true" 的属性设定，理论上它是可以拖动的，不论它是一个图片，还是一个 div，甚至只是一个链接。这里，以图片为例，将 draggable 属性写入 img 标签：

<img id="img1" alt="" src="图片地址" draggable="true" />

这样，理论上，图片就是可以拖动的。但是，wed可视对象能否真正被拖动，HTML自身无法独立完成，img标签仅赋予了图片可拖动的属性，真正实现起来，需要通过设计一系列的 JS 函数来帮忙完成。

第一，我们要明确拖动什么，可用 dataTransfer.setData() 方法来设置被拖放内容的相关数据。

data是数据，transfer，转移之意，dataTransfer就是数据转移、移动、拖动；set，设置，setData，设置数据。此方法需要两个参数：格式和数据。第一个参数，即数据格式，我们可以自设为“pic”或其他的，是将来要引用数据的关键词依据，保持声明引用前后一致就行，第二个参数，即数据，就是图片呀什么的要被拖动的对象，它通过目标对象的 id 标识符来表示。

比如，假设有一个元素叫 obj，则如果要拖动这个元素，可以这么办：

dataTransfer.setData("pic",obj.target.id);

如前已解释，pic是我们定义的数据格式或类型标识，将在后续被使用，要放在引号里；第二个参数 obj.target.id 语句里，obj是我们定义的对象名，target.id 是目标id，必须这样表达，强记。

现在，我们来设计一个JS函数，完成定义要拖动什么的工作：

function drag(obj) {
        obj.dataTransfer.setData("pic", obj.target.id);
}

drag(obj)是我们自定义的函数，函数名 drag，函数参数是obj，指被拖动对象。函数内容放在大括号里，表示对象obj通过 dataTransfer.setData() 方法，定义数据类型为 pic 的 obj 为即将被移动的对象（内容）。

drag(obj)这个函数发生在HTML对象开始移动之时，即 JS 对应的 ondragstart 事件，所以，img标签的HTML代码要加入它，通过 ondragstart 事件 调用 drag(obj) 函数，drag(obj)函数的参数不能随便命名，只能用“event”这个单词，亦即，告诉函数 drag(obj)，我们要在图片的 ondragstart 事件中调用你，你的 obj 参数传入的是 event 元素：

<img id="img1" alt="" src="图片地址" draggable="true" ondragstart="drag(event)" />

再次强调：上句，新加入的蓝红字串里，自定义的drag()函数的obj参数只能用 event（元素）这个单词传入，后面定义的自定义函数也是这样使用。

第二，移动到何处。移民要有接收地，假如你是移民，你从A国出发，即 ondragstart 事件已经发生，下一步就是路经（over）某国，JS对应的 ondragover 事件发生，经过B国时，HTML世界里，默认是不接纳移民被放下（drop）的，我们需要取消该拒绝移民的“政策”：

preventDefault()

这是“阻止默认属性”之意，亦即取消默认设置，令其开放准许接接收“移民”。我们需要设计一个函数来发出我们的强迫B国接收移民的函数指令：

function allowDrop(obj) {
    obj.preventDefault();
}

这个函数我们也设计了一个参数 obj，对象之意，obj是一个函数变量，这里它不是指图片，而是指接收图片“移民”的一个“国家”，B国，在HTML里，可以是一个 div 盒子：

(这个地方代码编辑起来很怪异，请参阅后面的相应代码)

好了，B国允许移民了，那就把移民放下，这个需要 JS 对应的 ondrop 方法，我们同样要为这个方法设计一个函数：

function drop(obj) {
    obj.preventDefault();
    var data = obj.dataTransfer.getData("pic");
    obj.target.appendChild(document.getElementById(data));
}

drop(obj) 是我们自定义的函数，在这里，obj 参数指被放下的图片对象（即“移民”），首先申明去除图片被放下时接收地打开方式的默认设定（默认是链接处理），再通过getData方法获取被放下的目标数据类型依据，即pic（参考第一步的解释），赋值给data句柄变量，接着在目的地即“B国”用 appendChild（追加孩子）的方法将图片追加到其中。

drop(obj)函数在B国 div 中通过 ondrop 事件调用：

(这个地方代码编辑起来很怪异，请参阅后面的相应代码)

完整的HTML和JS代码如下（设定了图片尺寸与div边框以方便观察效果）：

前一篇: JS教程之六——for语句
下一篇: svg带lrc圆环播放器封装成了JS文件