js实现拖拽 闭包函数详细介绍

JavaScript实现拖拽 闭包函数详细介绍

在网页开发中，经常会遇到需要通过鼠标拖拽来实现一些操作的需求，如拖拽图片、调整界面尺寸等。下面我们以一个实现拖拽的例子来介绍如何使用JavaScript实现拖拽功能，并介绍闭包函数的概念和应用。

实现拖拽的思路

1. 当鼠标按下时，记录下鼠标的位置和拖拽元素的位置。
2. 当鼠标移动时，根据鼠标移动的距离来更新拖拽元素的位置。
3. 当鼠标松开时，停止拖拽操作。

基本的拖拽实现

我们可以通过鼠标按下、移动、松开事件来实现拖拽功能。下面是一个实现拖拽的基本示例：

<div id="drag">拖拽我</div>

<script>
var drag = document.getElementById('drag');
var disX, disY;

drag.onmousedown = function(event) {
    disX = event.clientX - drag.offsetLeft;
    disY = event.clientY - drag.offsetTop;

    document.onmousemove = function(event) {
        var left = event.clientX - disX;
        var top = event.clientY - disY;

        drag.style.left = left + 'px';
        drag.style.top = top + 'px';
    }

    document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }

    return false; // 阻止默认事件
}
</script>

在上述代码中，当鼠标按下时，会记录下鼠标的位置和拖拽元素的位置，并将onmousemove和onmouseup事件绑定到document上，而不是drag上，目的是为了将拖拽范围扩大到整个页面。当鼠标移动时，会根据鼠标移动的距离来更新拖拽元素的位置；当鼠标松开时，会停止拖拽操作。

使用闭包实现拖拽

在上面的实现中，我们将onmousemove和onmouseup事件绑定到了document上，并且通过onmouseup事件将onmousemove和onmouseup事件解绑。然而，如果页面上存在多个可拖拽元素时，会出现一些问题。为了解决这个问题，我们可以使用闭包来实现拖拽。

<div class="drag">拖拽我1</div>
<div class="drag">拖拽我2</div>
<div class="drag">拖拽我3</div>

<script>
var drags = document.getElementsByClassName('drag');
for (var i = 0; i < drags.length; i++) {
    drags[i].onmousedown = (function(i) {
        return function(event) {
            var drag = drags[i];
            var disX = event.clientX - drag.offsetLeft;
            var disY = event.clientY - drag.offsetTop;

            document.onmousemove = function(event) {
                var left = event.clientX - disX;
                var top = event.clientY - disY;

                drag.style.left = left + 'px';
                drag.style.top = top + 'px';
            }

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            }

            return false; // 阻止默认事件
        }
    })(i);
}
</script>

在上述代码中，我们利用了IIFE（立即执行函数表达式）和闭包的特性，在循环中为每个拖拽元素绑定了独立的onmousedown事件，这样就可以避免多个拖拽元素之间的干扰。

小结

通过上述示例，我们学习了JavaScript实现拖拽的基本思路，并且介绍了如何使用闭包函数来避免多个可拖拽元素之间的干扰问题。了解闭包函数的概念和应用对于理解JavaScript编程中的一些高级概念和技巧非常重要。