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

最新推荐文章于 2023-11-01 10:47:22 发布

我的IP在路上

最新推荐文章于 2023-11-01 10:47:22 发布

阅读量492

点赞数

分类专栏： web前端笔记文章标签：拖拽

本文链接：https://blog.csdn.net/u012552049/article/details/45507279

版权

web前端笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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>