拖拽原理-问题-解决办法

来源：互联网发布：ppt圆环图编辑数据编辑：程序博客网时间：2024/05/16 19:41

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}</style><script>window.onload = function() {    /*    1.拖拽的时候，如果有文字被选中，会产生问题        原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果            解决：                标准：阻止默认行为                非标准ie：全局捕获    */    var oDiv = document.getElementById('div1');    oDiv.onmousedown = function(ev) {        var ev = ev || event;        var disX = ev.clientX - this.offsetLeft;        var disY = ev.clientY - this.offsetTop;        if ( oDiv.setCapture ) {            oDiv.setCapture();        }        document.onmousemove = function(ev) {            var ev = ev || event;            oDiv.style.left = ev.clientX - disX + 'px';            oDiv.style.top = ev.clientY - disY + 'px';        }        document.onmouseup = function() {            document.onmousemove = document.onmouseup = null;            //释放全局捕获 releaseCapture();            if ( oDiv.releaseCapture ) {                oDiv.releaseCapture();            }        }        return false;    }}</script></head><body>    jafldsfjdsjfkl    <div id="div1"></div></body></html>

例二：限制范围的拖拽和磁性吸附
限制范围原理：当被拖拽的元素到达限制范围的边沿的时候，让目标元素的Left或Top的值等于限制范围的值。
磁性吸附原理：当目标元素快要到达吸附的边沿的时候，让目标元素的Left或Top值等于吸附的边沿值。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}</style><script>window.onload = function() {    var oDiv = document.getElementById('div1');    drag(oImg);    drag(oDiv);    function drag(obj) {        obj.onmousedown = function(ev) {            var ev = ev || event;            var disX = ev.clientX - this.offsetLeft;            var disY = ev.clientY - this.offsetTop;            if ( obj.setCapture ) {                obj.setCapture();            }            document.onmousemove = function(ev) {                var ev = ev || event;                var L = ev.clientX - disX;                var T = ev.clientY - disY;                if ( L < 100 ) {                    L = 0;                } else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {                    L = document.documentElement.clientWidth - obj.offsetWidth;                }                if ( T < 0 ) {                    T = 0;                } else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {                    T = document.documentElement.clientHeight - obj.offsetHeight;                }                obj.style.left = L + 'px';                obj.style.top = T + 'px';            }            document.onmouseup = function() {                document.onmousemove = document.onmouseup = null;                if ( obj.releaseCapture ) {                    obj.releaseCapture();                }            }            return false;        }    }}</script></head><body>    <div id="div1"></div></body></html>

0 0