HTML5 元素拖拽实现及 jquery.event.drag插件

如上图片：
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>可拖拽的元素组件</title>
    <style>
        #d1 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
        #d2 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
        
    </style>
</head>
<body>
    <div id="d1">
      <img id="myimg" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
    </div>
 
   <div id="d2"></div>
   
   <script>
   
   //获取图片及两个div元素
    var d1 = document.getElementById("d1"),
        myimg = document.getElementById("myimg"),
        d2 = document.getElementById("d2");

    //给图片绑定dragstart事件
    myimg.addEventListener("dragstart",MyDragStart);
    
    //给第二个div绑定dragover,drop两个事件
    d2.addEventListener("dragover",MyDragover);
    d2.addEventListener("drop",MyDrop);

    //给第一个div绑定dragover,drop两个事件
    d1.addEventListener("dragover",MyDragover);
    d1.addEventListener("drop",MyDrop);

    //图片开始拖拽事件的处理函数
    function MyDragStart(event){
        var mydata = myimg.id;//保存ID值
        var trans = event.dataTransfer;
        trans.setData("text",mydata);
    }

    //该处理函数是为阻止页面的默认行为
    function MyDragover(){
        event.preventDefault();
    }

    //drop处理函数
    function MyDrop(event){
        //
        var trans = event.dataTransfer;//获取数据保存对象
        var mysrc = trans.getData("text");//图片id
        var ele = document.getElementById(mysrc);//获取到图片对象
        if (ele != event.srcElement)//判断图片是否移动
        {
            event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中
        }

        trans.clearData("text");//清除数据
    }
    </script>
</body>
</html>
View Code