拖放介绍

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。虽然在HTML5之前已经可以使用 mousedown，mousemove，mouseup 实现拖放，但是只支持在浏览器内部的拖放，在HTML5中，拖放是标准的一部分，任何元素都能够拖放，并且支持浏览器与其他应用程序之间的数据的互相拖放，同时大大简化了拖放方面的相关代码。

拖放实现步骤

1、将想要拖放的对象元素的 draggable 属性设为true，注意： img 与 a 元素默认允许拖放。

2、编写与拖放相关的事件处理代码。

拖放事件

拖动事件：

  • dragstart
    鼠标按下并开始移动时触发，此时光标变成了“不能放”符号(圆环中有一条反斜线)，表示不能把元素放到自己上面。
  • drag
    鼠标拖拽过程中触发，并且在元素被拖动期间会持续触发该事件(类似mousemove事件)。
  • dragend
    无论是把元素放到了有效的放置目标，还是回到原位，当拖放停止时都会触发该事件。

放置事件：

  • dragenter
    只要有元素被拖动到放置目标上，就会触发该事件（类似mourseover事件）。
  • dragleave
    只要元素被拖出了放置目标，就会触发该事件。
  • dragover
    只要被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。

需要注意的是，HTML页面的某些元素默认情况下不允许进行拖放，称之为HTML页面的默认行为。我们需要重写dragover事件，阻止事件的默认行为，将其变成有效的放置目标。

$('.content').on('dragover',function(event){
	event.originalEvent.preventDefault(); 	
});
  • drop
    将拖动元素放置到目标元素上的时候会触发该事件。

拖放事件生命周期：

当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发：

dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

数据交互（DataTransfer对象）

在拖放操作时实现数据交换是事件对象的一个属性，用于从被拖拽元素向放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问 dataTransfer 对象，并通过 event.dataTransfer 来获取DataTransfer实例。

dataTransfer对象的方法：

• setData(key，val)： 设置拖拽元素数据，在dragstart事件中使用。
• getData(key)： 获取设置的数据，在drop事件中使用。
• clearData()： 删除指定格式的数据。仅在dragstart事件中调用，在其他事件中调用会抛出异常。
• setDragImage()： 指定一幅图像，当拖放发生的时候，显示在光标下方（实际操作中基本不用）。

dataTransfer对象的属性：

• dropEffect： 用于设置目标元素将执行的操作，表示实际拖放时的视觉效果。
• effectAllowed： 与dropEffect属性一起使用，设定拖放时的视觉效果。
• types： 数据类型为DOMStringList，存储DataTransfer对象中所有数据项的数据类型。
• items： 数据类型为DataTransferItemList，存储DataTransfer对象中所有的数据项。

学完了拖放的基础知识，下面我们来写一个简单的HTML代码来执行一下拖放操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖放</title>
    <style>
        .outer{
            height: 150px;
            border: 1px solid red;
            margin: 10px;
        }
        .inner{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            margin: 10px;
        }
    </style>
    <script>
        window.onload = function(){
            var outer = document.getElementsByClassName('outer')
            var inner = document.getElementsByClassName('inner')
            inner = Array.from(inner)
            outer = Array.from(outer)
            inner.forEach(function(item){
                //变成可拖拽元素
                item.draggable = true
                item.ondragstart = dragstart
            });
            outer.forEach(function(item){
                item.ondragover = dragover
                item.ondrop = drop
            })
            // 拖拽开始
            function dragstart(event){
                event.dataTransfer.setData('id',this.id)
            }
            function dragover(event){
                // 阻止默认行为，变成可放置的
                 event.preventDefault()
            }
            function drop(event){
                var oid = event.dataTransfer.getData('id')
                var dom = document.getElementById(oid)
                this.append(dom)
            }
        }
    </script>
</head>
<body>
    <div class="outer"></div>
    <div class="outer"></div>
    <div class="inner" id="one"></div>
    <div class="inner" id="two"></div>
    <div class="inner" id="three"></div>
</body>
</html>