使用基本的jQuery框架拖放

Question

使用基本的jQuery腳本（不使用jQuery UI）可以實現拖放嗎？

Answer 1

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

希望幫助的時刻。