jQueryのUIなしのjQueryを使用してドラッグし、ドロップ可能オブジェクトを作るための良い方法はありますか？

Question

私はjQueryのUIを使用せずに、ドラッグとドロップ可能なものを作るしようとしているが、私はUIを使用していない人を見つけるように見えることはできません。あなたは、UIを使用せずにこれを達成する方法を知っていますか？

$('#div2').on('dragover', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 
$('#drag1').on('dragleave', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 
$("#div2").on('drop', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $('#popup').fadeIn(500).fadeOut(500); 
}); 
$('#div3').on('dragover', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 
$("#div3").on('drop', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $('#popup-cart').fadeIn(500).fadeOut(500); 
}); 

Answer 1

は自分の質問回答：私はHTML5のドラッグ/ドロップしようとした

$('#div2').on('dragover', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 
$('#drag1').on('dragleave', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 
$("#div2").on('drop', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $('#popup').fadeIn(500).fadeOut(500); 
}); 
$('#div3').on('dragover', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 
$("#div3").on('drop', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $('#popup-cart').fadeIn(500).fadeOut(500); 
}); 

Answer 2

これは不合理である：

は自分の質問に答えました。それはReactやAngularのようなものであれば問題ないかもしれませんが、普通のjQueryで...楽しんでください！

しかし、すべての深刻さで、ダウンクリックを処理しなければならず、クリックがダウンしている間にマウスドラッグを処理し、top: xとleft: yの値をマウスの位置に設定します。その後、マウスをクリックしてドラッグを停止します。私が言ったように、Reactではもっと簡単にstatesが得られ、素早く簡単に特異なコンポーネントを再描画することができます。

Answer 3

ドラッグ&ドロップのサポートは、HTML5であり - https://www.w3schools.com/html/html5_draganddrop.asp

ので、あなたはJQのUIなしでjQueryを使って一緒にそれを使用することができます

Answer 4

は私が先日見つかったこのCodepenの提出を見てください。

私はそれにあまりにも深く見ていない、しかし、あなたはおそらく、イベントやポジショニングからインスピレーションを取ることができます。

Codepen

//Add Event Listener 
function adding() 
{ 
    dragme.addEventListener('mousedown',mousedown,false); 
    body.addEventListener('mouseup',mouseup,false); 
} 

SOので、ここでのSOMイベントリスナーのランダムなスニペットで、私はコードなしcodepenのリンクを掲載させません。