码迷,mamicode.com
首页 > 其他好文 > 详细

drag拖拽

时间:2018-11-03 12:34:35      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:event   属性   div2   body   图像   over   art   start   全局   

当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒).

1 <body>
2     <div id="div1">
3         <p draggable="true">这是p</p>
4     </div>
5     <div id="div2"></div>
6     <div id="div3"></div>
7 </body>

draggable 属性规定元素是否可拖动。(draggable是html全局属性)true为可拖动

提示: 链接和图像默认是可拖动的

 

 

ondrag         应用于拖拽元素,整个拖拽过程都会调用--持续
     ondragstart    应用于拖拽元素,当拖拽开始时调用
     ondragleave    应用于拖拽元素,当鼠标离开拖拽元素时调用
     ondragend    应用于拖拽元素,当拖拽结束时调用

 

--------------------------------------------

ondragenter    应用于目标元素,当拖拽元素进入时调用
     ondragover    应用于目标元素,当停留在目标元素上时调用
     ondrop        应用于目标元素,当在目标元素上松开鼠标时调用
     ondragleave    应用于目标元素,当鼠标离开目标元素时调用

 

浏览器默认会阻止ondrop事件:我们必须在ondragover中阻止浏览器的默认行为

div2.ondragover=function(e){
        //console.log("ondragover");
        /*如果想触发ondrop事件,那么就必须在这个位置阻止浏览器的默认行为*/
        e.preventDefault();
    }

 

drag拖拽

标签:event   属性   div2   body   图像   over   art   start   全局   

原文地址:https://www.cnblogs.com/zhaozhaoli/p/9899101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!