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

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

实现拖拽的思路

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

基本的拖拽实现

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

<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事件，这样就可以避免多个拖拽元素之间的干扰。