Javascript 使用jQuery而不使用jQueryUI，有没有一种好方法可以创建一个可拖放的对象？

我试图在不使用jQueryUI的情况下使某些东西可以拖动和拖放，但我似乎找不到没有使用过该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); 
});

$('#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); 
});

---

这是不合理的。在React或Angular之类的情况下可能没问题，但在普通jQuery中。。。玩得开心

---

但是非常严肃地说，您必须处理向下单击，并且在单击停止时，处理鼠标拖动，并将

top:x

和

left:y

值设置为鼠标位置。然后停止拖动鼠标向上单击。正如我所说，React更容易，您可以获得

状态

，并且可以快速轻松地重新渲染单个组件

html5中有拖放支持-

---

因此，您可以在不使用jqui的情况下将其与jquery一起使用，看看我前几天发现的这个代码笔提交

我还没有深入研究它，但你可能会从事件和定位中获得灵感

---

因此，我不想在没有代码的情况下发布codepen链接，因此这里是som eventlisteners的随机片段。

回答了我自己的问题：

$('#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); 
});

$('#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); 
});

---

我尝试过HTML5拖放，我发现很难实现我的所有目标，最终得到了jQueryUI。它也有一些怪癖，但总的来说，它比本地选项更健壮。