使用基本的 jQuery 框架拖放答案

【问题标题】：Drag and drop using basic jQuery framework使用基本的 jQuery 框架拖放
【发布时间】：2012-03-23 19:43:42
【问题描述】：

是否可以使用基本的jQuery脚本（不使用jQuery UI）实现拖放？

【问题讨论】：

标签： jquery draggable drag-and-drop jquery-draggable

【解决方案1】：

在 HTML5 中，有一个名为“可拖动”的属性。

<div draggable='true'>Drag me</div>
<div id='dropzone'>Drop it here!</div>

您可以利用以下事件：

var onDragEnter = function(event) {
    event.preventDefault();
    $("#dropzone").addClass("dragover");
}, 

onDragOver = function(event) {
    event.preventDefault(); 
    if(!$("#dropzone").hasClass("dragover"))
        $("#dropzone").addClass("dragover");
}, 

onDragLeave = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");
},

onDrop = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");
    console.log(event.originalEvent.dataTransfer.files);
};

$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);

希望暂时能有所帮助。

【讨论】：