js鼠标拖拽

作者: 岳小弟 | 来源:发表于2018-06-05 14:39 被阅读0次

js实现拖拽
js鼠标拖拽
js鼠标拖拽
怎么区分鼠标是单击还是拖动？
js鼠标拖拽事件
vue拖拽元素
原声js-鼠标拖拽
原生js鼠标拖拽效果
实现可拖拽插件
js拖拽

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{margin: 0;padding: 0;}</style>
</head>
<body>
<div id="demo" style="position:absolute;width: 100px;height: 100px;background: #ccc;border:solid 1px #ccc;">按住左键拖动</div>
</body>
<script>
window.onload = function() {
//用于确定是否是拖拽的对象
var drag;
//鼠标位于目标元素上的时候距离目标元素的位置
var x,y;
//取得元素
var ele = document.getElementById('demo');

    //鼠标按下去  
    ele.onmousedown = function(evt) {  
        //取得事件对象  
        _event = evt || window.event;  
        //设置drag元素  
        target = _event.target || _event.srcElement;  
        x = _event.clientX - target.offsetLeft;  
        y = _event.clientY - target.offsetTop;  
        drag = target;  
    }  

    //鼠标移动  
    document.onmousemove = function(evt) {  
        //确定鼠标是在目标元素上按下去后才开始移动  
        if(drag) {  
            _event = evt || window.event;  

            //设置边界  
            var left = _event.clientX - x;  
            var top = _event.clientY - y;  
            body = document.documentElement || document.body;  
            if (left < 0) left = 0;  
            if (left > body.offsetWidth - drag.offsetWidth) left = body.offsetWidth - drag.offsetWidth;  
            if (top < 0) top = 0;  
            if (top > (body.offsetHeight - drag.offsetHeight)) top = (body.offsetHeight - drag.offsetHeight);  

            //设置样式  
            drag.style.cursor = 'move';  
            drag.style.border = 'dashed 1px red';  
            drag.style.left = left + 'px';  
            drag.style.top = top + 'px';  
        }  
    }  

    //松开鼠标  
    document.onmouseup = function(evt) {  
        if(drag) {  
            //卸载样式  
            drag.style.cursor = '';  
            drag.style.border = 'dashed 1px #ccc';  
        }  
        drag = null;  
    }  

}

</script>
</html>