HTML5中的拖（Drag）与放（Drop）

1、网页元素的拖放：

通常我们看到的网页上各元素的位置都是固定的，虽然可以通过输入或点击来与网页进行交互，但程度上比较单一。

HTML5可以支持网页上任何元素的拖放了。就像在电脑操作系统中，你可以把一张图片拖动到文件夹一样。以此为例，有以下概念需要记住：

1. 一次拖放涉及到两个主体：

    拖动的主体：图片

    接受的主体：文件夹

2. 拖放过程中发生的事件：

    图片：开始被拖动，拖动中，拖动结束；

    文件夹：图片拖动着进入，图片悬停，图片离开，图片鼠标释放。

3. 数据的传递：

    图片在拖动时，坐标在不停的发生变化；

    图片从文件夹外移动到了文件夹内，所以在目录内容上数据发生的变化。

下文中把【图片】称为源对象；把【文件夹】称为目标对象。

2、可拖动的对象：

在HTML5中要使一个元素变成可拖动的元素很简单：

<img draggable="true">

在任何元素中加上上面代码中粗体部分的标记就行了。

3、源对象ondragstart事件：

在该事件中，主要有两件事可以做：

1. 设置要传递给目标对象的数据；

2. 记录源对象的初始坐标（在要移动源对象时才需要，你可以观察桌面拖动的情况，拖动时源对象并没有动。）。

示例代码如下（jquery）：

$(".drag_object").on("dragstart", function (e) {

   cur_drag_obj.xPos = e.offsetX;

   cur_drag_obj.yPos = e.offsetY;

    // jquery传递数据

   e.originalEvent.dataTransfer.setData("obj_add", $(this).attr("id"));

   // js传递数据

   // e.dataTransfer.setData("Text", e.target.id);});

}

4、源对象ondrag事件：

该事件通常在你要实现源对象坐标时才会用到（如你要做一个打飞机的游戏什么的）。普通的应用可以不用管它。

示例代码如下（jquery）：

$(".drag_object").on("drag", function (e) {

    // 实现代码

});

5、源对象ondragend事件：

该事件不用去管它，因为在拖动结束时，如果在目标对象上，有目标对象的ondrop事件来处理就够了。如果不在目标对象上，则拖动不起作用，更不需要管了。

6、目标对象ondragenter事件：

该事件一般也不需要去实现相应功能，因为有可能是误进入，如果在刚进入时就处理一堆东西在效率上不是很合理。应该把进入处理的功能放到ondragover事件上，会更有效率。

7、目标对象ondragover事件：

如果拖动的目标，已经悬停了一会，说明这就是真正的目标对象了。在这个事件中，可以实现一些特殊的效果来达到以下目的：

1. 实现鼠标释放后的预览效果，让用户感觉到是不是真的要释放；

2. 弹出一些隐藏的信息，来进一步的确认释放的必要性；

3. 让目录对象变成可以接收的对象。

示例代码如下（jquery）：

$(".drop_object").on("dragover", function (e) {

    // 默认无法将元素放置到其他元素中。所以要阻止对元素的默认处理方式。

   e.preventDefault();

   $(this).css("color", "red");

});

8、目标对象ondragleave事件：

该事件的主要功能是把在ondragover事件中实现的特殊效果进行复原。如果没有实现ondragover事件，那该事件通常也不需要进行实现。

9、目标对象ondrop事件：

该事件实现了在目标对象上释放鼠标后要完成的功能，如果没实现该事件，那么页面上的拖动效果也就没有意义了。

示例代码如下（jquery）：

$(".drop_object").on("drop", function (e) {

   e.preventDefault();

   // jquery传递数据

   var id = e.originalEvent.dataTransfer.getData("obj_add");

   // js传递数据

   // var id = e.dataTransfer.getData("obj_add");

   alert(id);

});