Html5-draggable元素拖动

Html5元素拖动

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.

第一步：将需要拖动的元素Html标签设置为draggable="true"

<img id="dragImg" draggable="true" src="img/test1.png" width="200" height="111" />

第二步：定义拖动函数

        //拖动开始
        function dragStar(ev) {
            //获取拖动元素值得类型与id
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        //拖动中
        function draging(ev) {
            //去除浏览器对数据的默认处理
            ev.preventDefault();
        }

        //拖动结束（放置）
        function dragEnd(ev) {
            //去除浏览器对数据的默认处理
            ev.preventDefault();
            //获取被拖动（需要放置）的元素的id
            var data = ev.dataTransfer.getData("Text");
            //将data放置到容器中
            ev.target.appendChild(document.getElementById(data));
        }

第三步，为Html中需要拖动的元素，和拖动后放置的容器的 拖动事件绑定拖动上述定义函数

  <div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
        <img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
    </div>
    <div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>

ok，功能实现；

测试全代码：

css

#div1,#div2{ float:left; margin-right:10px; width:300px; height:120px; line-height:120px; text-align:center; border:1px solid #808080;  }
img{ vertical-align:middle; }

Html

<div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
        <img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
    </div>
    <div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>

JavaScript

       //拖动开始
        function dragStar(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        //拖动中
        function draging(ev) {
            ev.preventDefault();
        }

        //拖动结束（放置）
        function dragEnd(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

小知识：

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件