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

Question

基本的なjQueryスクリプトを使用して（jQuery UIを使用せずに）ドラッグアンドドロップを実現することは可能ですか?

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

今のところお役に立てば幸いです。