基本的なjQueryフレームワークを使用したドラッグアンドドロップ

Question

jQuery UIを使用しないで、基本的なjQueryスクリプトを使用してドラッグ＆ドロップを実現できますか？

Answer 1

HTML5には、「draggable」という属性があります。一瞬のために役立ちます

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

希望：

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

次のイベントを利用することができます。