可拖拽的元素的一个javascript实现方法

最新推荐文章于 2020-11-23 21:17:04 发布

weixin_30300225

最新推荐文章于 2020-11-23 21:17:04 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/osinger/p/6015314.html

版权

通过添加捕捉事件来完成监听偏移量
可以直接下载附件浏览器打开。
没有考虑 IE的兼容问题

<!doctype html>
<html>
<head></head>
<body>
    <div style="width:100px;height:100px;position:absolute;top:0px;left:0px;background-color:red;cursor:default" onmousedown="drag(this,event)">
        拖动我
    </div>
</body>
<script type="text/javascript">
function drag(element,event) {

    // 鼠标起始坐标
    var 
    startX = event.clientX,
    startY = event.clientY,
    // 元素相对于document的位置
    orignX = element.offsetLeft,
    orignY = element.offsetTop,

    // 获取鼠标相对元素的位置（在mousemove事件中，元素始终保持和鼠标的绝对偏移量不变）
    oX = startX - orignX,
    oY = startY - orignY;

    // 注册监听事件为捕捉(true)，这里事件要传递句柄名称
    if(document.addEventListener) {
        document.addEventListener('mousemove',moveHandler,true);
        document.addEventListener('mouseup',upHandler,true);
    }

    // 这里定义了两个事件句柄 

    // 这个e为mousemove事件，不再是mousedown触发的drag
    function moveHandler(e) {
        element.style.left = e.clientX - oX + 'px';
        element.style.top = e.clientY - oY + 'px';
    }
    // 
    function upHandler(e) {
        document.removeEventListener('mousemove',moveHandler,true);
        document.removeEventListener('mouseup',upHandler,true);
    }
}
</script>
</html>

转载于:https://www.cnblogs.com/osinger/p/6015314.html