HTML5拖拽API的使用实例

最新推荐文章于 2021-06-09 21:09:52 发布

a15251321907

最新推荐文章于 2021-06-09 21:09:52 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/SteelArm/p/8681280.html

版权

首先介绍一下HTML5拖拽过程中产生的事件：

如果A被拖动到B内部，则

1. A会触发ondragstart, ondrag, ondragend，分别代表拖拽开始，拖拽进行中和拖拽结束；

2. B会触发ondragenter, ondragover, ondragleave, ondrop，分别代表A物体进入B，在B上面，从B上方离开，在B上方松手停止拖拽；

3. 如果拖动本地文件，则不会触发ondragstart事件；

4. 事件间的数据传递使用e.dataTransfer.setDate(k, v)和e.dataTransfer.getData(k)。

需要注意的几点：

0. 将A的draggable属性设置为true，虽然你不设置可能也能拽；

1. dom默认拒绝对象在其内部放置，所以往往要用

B.ondragover = function(e){ e.preventDefault(); };

来取消掉默认事件；

2. 某些浏览器默认在拖放后以链接形式打开A，故需要使用

B.οndrοp= function(e){ e.preventDefault(); };

3. firefox中拖放图片会打开新页面，这个还是比较烦的，解决方法是先获取body元素，然后

body.ondrop = function(e){
   e.stopPropagation();
   e.preventDefault();  //注意这俩位置不能反了
};

4. firefox中，无法通过ondrag等事件实时获取鼠标位置，如

A.ondrag = function(e){
   console.log(e.offsetX, e.offsetY); 
};

这一般会输出两个0

解决方法是在document中设置事件监听

document.ondragover = function(e){
    e = e.originalEvent || e;
    x = e.clientX || e.pageX;
    y = e.clientY || e.pageY;
}

以下是一个实例，可在HTML页面中拖动图片：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        body{  
            margin:0;  
            min-height: 700px;
            position: relative;  
        }  
        img{  
            position:absolute;  
            left: 0;
            top: 0;
        }  
    </style>  
</head>  
<body>  
<h3>可拖动赤酱</h3>  
<img id="chi" src="nyachichi.png" alt="chichiyan" draggable="true" />  
<script>  
    var chi = document.getElementById("chi");
    var body = document.getElementsByTagName("body")[0];
    var offsetX, offsetY, x, y;
    
    document.ondragover = function(e){
        e = e.originalEvent || e;
        x = e.clientX || e.pageX;
        y = e.clientY || e.pageY;
    }
    
    body.ondragover = function(e){
        e.preventDefault();
    }
    
    body.ondrop = function(e){
        e.stopPropagation();
        e.preventDefault();
        console.log("事件源chi拖动结束");
    }
    
    chi.ondragstart=function(e){  
        console.log('事件源chi开始拖动');  
        offsetX = e.offsetX;  
        offsetY = e.offsetY;
        
    }  

    chi.ondrag=function(e){  
        <!-- console.log('事件源chi拖动中');  -->
    }  
    
    chi.ondragend=function(e){  
        e.preventDefault();
        chi.style.left = x-offsetX + "px";
        chi.style.top = y-offsetY + "px";
    }  
</script>  
</body>  
</html>

转载于:https://www.cnblogs.com/SteelArm/p/8681280.html

a15251321907

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖拽API的使用实例

首先介绍一下HTML5拖拽过程中产生的事件：如果A被拖动到B内部，则1. A会触发ondragstart, ondrag, ondragend，分别代表拖拽开始，拖拽进行中和拖拽结束；2. B会触发ondragenter, ondragover, ondragleave, ondrop，分别代表A物体进入B，在B上面，从B上方离开，在B上方松手停止拖拽；3. 如果拖动本地...
复制链接

扫一扫