HTML5新增的拖放API---（一）

 HTML5新增了关于拖放的API，通过API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互的界面。

 拖放操作可以分为两个动作：在某个元素上按下鼠标移动鼠标（没有松开鼠标），此时开始拖动；在拖动的过程中，只要没有松开鼠标，将会不断产生事件-----这个过程称为“拖”。把被拖动的元素拖动到另外一个元素上并松开鼠标-----这个过程被称为“放”。

一、启动拖放

在HTML5中，<img .../>元素默认就是可拖动的；而<a .../>元素只要设置了href属性，它默认也是 可拖动的。

对于普通的元素，如果想要让它变成可拖动的只要将该元素的draggable属性设置为true即可。但仅仅设置该元素的draggable属性还不够，因为仅仅设置了draggable='true'只是表示该元素可拖动，但拖动时并未携带数据，因此用户看不到拖动的效果。

 为了 让拖动操作能携带数据，应该为被拖动的元素指定ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

    <div style="150px;height:150px;background:rgba(195, 86, 246, 0.31);border:1px solid gray;"
         id="div1"
         draggable="true">
        可拖动div
    </div>
    <script type="text/javascript">
        //绑定拖动事件
        var div1 = document.getElementById('div1');
        div1.ondragstart = function (e) {
            //让拖动操作携带数据
            e.dataTransfer.setData('text/plain','www.baidu.com');
        }
    </script>

二、接受“放”

拖动时显示禁止图标，这表拖动到的“目的地”并不接受拖动的元素-----这是因为当拖动元素经过document时，document对象默认阻止了拖动事件，而其他HTML组件也位于document对象内，因此它们也不能接受“放”。

为了让document可以接受“放”，应该为documen的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。

document.ondragover=function(){

　　//取消事件的默认行为

 　　return false;

}

当用户把div元素拖到指定位置释放后，Firefox浏览器默认会打开一个新页面，页面的URL正是拖放操作携带的数据。如果使用Chrome浏览器来浏览该页面，当用户把div元素拖放到指定位置释放后，Chrome浏览器并没有执行任何默认动作。

 由此可见，不同浏览器对于拖放操作的默认动作并不相同，如果开发者取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。

document.ondrop=function(e){

e.stopPropagation();
e.preventDefault();

　　//取消默认行为

　　return false;

}

实例：

    <a href="http://www.baidu.com" id="link1">百度首页</a>
    <script type="text/javascript">
        var link1 = document.getElementById('link1');
        //链接事件
        link1.onclick = function () {

            //实验证明，超练级的取消浏览器默认动作 return false；可行
            //取消默认操作
            return false;
        }
        //拖拽处理
        document.ondragover = function (e) {
            e.stopPropagation();
            e.preventDefault();
        }
        document.ondrop = function (e) {
            e.stopPropagation();
            e.preventDefault();

            //实验证明，在拖拽API中，火狐浏览器的取消默认操作 return false；没有起作用
            //return false;
        }
    </script>

在用户拖放HTML元素的过程中，可能触发如下事件

事件	事件源	描述
ondragstart	被拖动的HTML元素	开始拖动操作时触发该事件
ondrag	被拖动的HTML元素	拖动过程中不断触发该事件
ondragend	被拖动的HTML元素	拖动结束时触发该事件
ondragenter	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内时触发该事件
ondragover	拖动时鼠标经过的元素	被拖动的元素进入本元素的范围内拖动时会不断触发该事件
ondragleave	拖动时鼠标经过的元素	被拖动的元素离开本元素时触发该事件
ondrop	拖动时鼠标经过的元素	其他元素被放到了本元素中时触发该事件

 

 

 

 

 

 

 

 

 

 实例：

    <div style="150px;height:150px;background:rgba(195, 86, 246, 0.31);border:1px solid gray;"
         id="div1"
         draggable="true">
        可拖动div
    </div>
    <script typee="text/javascript">
        var div1 = document.getElementById('div1');
        div1.ondragstart = function (e) {
            //添加携带数据
            e.dataTransfer.setData('text/plain', "www.baidu.com");
        }
        document.ondragover = function () {
            //取消默认操作
            return false;
        }
        document.ondrop = function (e) {
            //固定到指定位置，并显示携带数据
            div1.style.position = 'absolute';
            div1.style.left = e.pageX + 'px';
            div1.style.top = e.pageY + 'px';
            div1.innerHTML = e.dataTransfer.getData('text/plain');

            //取消默认操作
            e.stopPropagation();
            e.preventDefault();
        }
    </script>

 三、DataTransfer对象

  拖放触发的拖放事件有一个dataTransfer属性，该属性是一个DataTransfer对象，该对象包含如下属性和方法

• dataTransfer.dropEffect：设置或返回拖放目标上允许拖放的行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性只允许为"none"、“copy”、“link”和“move”四个值之一。
• dataTransfer.effectAllowed：设置会返回被拖动元素允许发生的拖动行为。该属性值可设置为“none”、“copy”、“copyLInk”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
• dataTransfer.items：该属性返回DataTransferItems对象，该对象代表了拖动数据。
• dataTransfer.setDragImage(element,x,y)：设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在垂直方向的距离
• dataTransfer.addElement(element)：添加自定义图标。
• dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
• dataTransfer.getData(format)：获取DataTransfer对象中format格式的数据。
• dataTransfer.setData(format,data)：向DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。
• dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据。如果省略format格式，则意味着清除DataTransfer对象中的全部数据。
• dataTransfer.files：获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。

通过DataTransfer对象，可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时（ondragstart）事件将拖放源的数据存入DataTransfer对象中，然后在拖放结束从DataTransfer对象中读取数据，这样就可以完成更复杂的错放操作了。

实例：

四、拖放行为

五、改变拖放图标