JS实现拖拽的方法分析

在Web开发中，拖拽是一种常见的交互方式。本文将介绍三种实现拖拽的方法。

HTML5 Drag and Drop API

HTML5 Drag and Drop API是现代浏览器提供的原生拖拽功能，不需要引入任何第三方库。该API包含五个事件和三个属性，可以通过设置这些事件和属性来实现拖拽功能。

使用方法

1. 将要拖拽的元素添加draggable="true"属性

<div draggable="true">拖拽我</div>

1. 设置拖拽开始和结束事件

element.addEventListener('dragstart', function(event) {
    // 拖拽开始
    // 传递数据
    event.dataTransfer.setData('text/plain', '拖拽的数据');
});

element.addEventListener('dragend', function(event) {
    // 拖拽结束
});

1. 设置可拖拽目标元素的drop事件

targetElement.addEventListener('drop', function(event) {
    // 接收数据
    var data = event.dataTransfer.getData('text/plain');
    console.log(data);
});

示例

页面上有两个元素，一个可以拖拽，一个可以接收拖拽。拖拽开始时将数据传递给可拖拽目标元素，在接收拖拽目标元素上打印传递的数据：

<div draggable="true">拖拽我</div>
<div id="target">拖拽到这里</div>

var dragElement = document.querySelector('div[draggable=true]');
var targetElement = document.querySelector('#target');

dragElement.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', '拖拽的数据');
});

targetElement.addEventListener('drop', function(event) {
    var data = event.dataTransfer.getData('text/plain');
    console.log(data);
});

使用第三方库

除了HTML5 Drag and Drop API，我们还可以使用第三方库来实现拖拽功能，比如jQuery UI和interact.js。

jQuery UI

jQuery UI是一款常用的UI组件库，其中包含一个draggable组件。使用该组件可以方便地实现拖拽功能。

使用方法

1. 引入jQuery和jQuery UI库文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

1. 使用draggable方法

element.draggable();

示例

页面上有两个元素，一个可以拖拽，一个可以接收拖拽。拖拽开始时将数据传递给可拖拽目标元素，在接收拖拽目标元素上打印传递的数据：

<div id="drag">拖拽我</div>
<div id="target">拖拽到这里</div>

$("#drag").draggable({
    start: function(event, ui) {
        ui.helper.data('text/plain', '拖拽的数据');
    }
});

$("#target").droppable({
    drop: function(event, ui) {
        var data = ui.helper.data('text/plain');
        console.log(data);
    }
});

interact.js

interact.js是一款轻量级的前端交互库，可以实现拖拽、缩放、旋转等常见交互效果。

使用方法

1. 引入interact.js库文件

<script src="https://cdn.bootcss.com/interact.js/1.2.6/interact.min.js"></script>

1. 使用interact方法，并指定可拖拽目标元素和拖拽结束后的回调函数

interact('#drag')
.draggable({
    onmove: function(event) {
        var x = (parseFloat($(this).css('left')) || 0) + event.dx;
        var y = (parseFloat($(this).css('top')) || 0) + event.dy;

        $(this).css('left', x + 'px');
        $(this).css('top', y + 'px');
    },
    onend: function(event) {
        // 拖拽结束
    }
});

示例

页面上有两个元素，一个可以拖拽，一个可以接收拖拽。拖拽开始时将数据传递给可拖拽目标元素，在接收拖拽目标元素上打印传递的数据：

<div id="drag">拖拽我</div>
<div id="target">拖拽到这里</div>

interact('#drag').draggable({
    onstart: function(event) {
        event.interactable.dragElement.data('text/plain', '拖拽的数据');
    },
    onmove: function(event) {
        var x = (parseFloat($(this).css('left')) || 0) + event.dx;
        var y = (parseFloat($(this).css('top')) || 0) + event.dy;

        $(this).css('left', x + 'px');
        $(this).css('top', y + 'px');
    }
});

interact('#target').dropzone({
    ondrop: function(event) {
        var data = event.relatedTarget.data('text/plain');
        console.log(data);
    }
});

总结

以上是三种实现拖拽的方法，每种方法都有其优缺点。HTML5 Drag and Drop API是原生的API，不需要引入任何库，但是不支持在不同浏览器之间的兼容性问题；第三方库可以更方便地实现拖拽功能，但是需要引入额外的库文件，并且可能会产生冲突或不兼容问题。选择合适的方法应该根据具体情况而定。