使用基本的jQuery框架拖放 [英] Drag and drop using basic jQuery framework

问题描述

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

Is it possible to achieve drag and drop using basic jQuery script (without using jQuery UI)?

推荐答案

在HTML5中，有一个名为draggable的属性。

In HTML5, there's an attribute called "draggable".

<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);

希望有所帮助。

这篇关于使用基本的jQuery框架拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！