drag事件

<!DOCTYPE HTML>
<html>
<head>
   <title>拖动事件</title>
   <style>
       *{padding: 0;margin:0}
       body{font-size:14px;font-family: "微软雅黑";background:#333}
       #box1{width:60px;height:80px;background:#888;text-align:center;border:1px solid #ccc;}
       #box2{width:320px;height:420px;background:#fff;position:absolute;right:0;bottom:0}
   </style>
</head>
<body>

   <div id="box1" draggable="true">
        <span draggable="true">Box1</span>

        <a href="#">Link</a>
   </div>

   <div id="box2" draggable="true">
       Box2
       <img src=""/>
   </div>
   <script type="text/javascript">
       /*
           在html5新特性：元素的拖放draggable
           ndragstart:拖拽开始 onmousedown
           ondrag:拖动中 onmonsemove
           ondragend:拖放结束:onmouseup

           针对当一些进入目标时候执行的回调函数,用途（购物车）
            ondragenter:元素进入目标区域时触发
            ondragover:元素在目标区域上时触发
            ondragleve:元素从目标区域离开时触发
           ondrop:有元素进入在目标区域内释放时触发
       */
       window.onload = function(){
           var boxDom1 = document.getElementById("box1");
           var boxDom2 = document.getElementById("box2");

           /*拖动元素事件 Start*/
           boxDom1.addEventListener("dragstart", function(){
               console.log("box1开始了拖拽了--dragstart");

           }, false);

           boxDom1.addEventListener("drag", function(e){
               console.log("box1拖拽中--drag");
           }, false);


           boxDom1.addEventListener("dragend", function(){
               console.log("box1拖放结束--dragend");

           }, false);

           boxDom1.addEventListener("dragover", function(e){
               console.log("box1有元素在其上方--dragover");
               e.preventDefault();
           }, false);
           /*拖动元素事件 End*/

           /*目标元素事件 Start*/
           boxDom2.addEventListener("dragover", function(e){
               console.log("box2有元素在目标区域上方dragover");
               //此处要阻止事件冒泡，否则drop事件不能触发
               e.preventDefault();
           }, false);

           boxDom2.addEventListener("dragenter", function(){
               console.log("box2 有元素进入目标区域--dragenter");
           }, false);

           boxDom2.addEventListener("dragleave", function(){
               console.log("box2有元素离开目标区域--dragleave");
           }, false);


           boxDom2.addEventListener("drop", function(){
               console.log("box有元素在目标区域释放--drop");
           }, false);
           /*目标元素事件 End*/
       };

   </script>
</body>
</html>

时间： 2024-07-29 17:53:21

drag事件

drag事件的相关文章

拖拽的效果第一步设置可拖拽的属性 draggable="true" 绑定drag 事件第二步设置放置位置触发的事件 dragover 第三步设置放置之后触发的事件 dragover 下面请看代码：

运用HTML5原生拖动事件（drag）实现拖动效果

【 D3.js 进阶系列 — 6.0 】拖拽的应用（Drag）

jQuery UI 拖动（Draggable） - 事件

javascript高级程序设计---拖拉事件

atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

DOM事件类型详解

Win7下的DragEnter、DragDrop事件不触发的解决

原生 drag drop HTML5