logo标签列表

使用基本的jQuery框架进行拖放操作

jquerydraggabledrag-and-dropjquery-draggable
7
使用基本的jQuery脚本（不使用jQuery UI），是否可以实现拖放操作？
1个回答
16
在HTML5中，有一个名为“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);

希望暂时对您有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接