首页 > Web开发 > 详细

HTML5 元素拖拽实现

时间:2017-01-24 11:07:38      阅读:280      评论:0      收藏:0      [点我收藏+]

 技术分享

如图片:

<!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>

 

 

http://www.cnblogs.com/Medeor/p/4963321.html

HTML5 元素拖拽实现

原文:http://www.cnblogs.com/xiangsj/p/6346574.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!