Javascript 不使用JQuery UI进行拖放

我搜索了很多关于单独使用jQuery（没有UI）拖放的教程，但是由于jQuery UI的流行，所有拖放功能都基于jQuery UI

---

谁能给我一个提示，如何让JQuery独立地进行基本的拖放操作？

有几个插件可以使用，请看下面的内容

---

它仍然是jquery，但没有UI

我认为一个好的起点可能是制定流程，然后决定每个用户操作需要使用哪些jquery工具

因此，用户进程可能是：

• 单击“可拖动”区域上的内容div
• 拖动内容，这将使内容保持在该div内
• 释放鼠标，将内容放入“可拖放”容器中，该容器将调整先前内容的大小以适合可拖放的大小

它需要以下类型的事件侦听器：

• 鼠标
• 穆斯敦
• 生动活泼

---

至少是这样。另一个选项可能是查看jQueryUI源代码，看看他们是如何做到的！这将告诉您具体要做什么，但您可以在必要时添加或修剪。

遇到了同样的问题，对于仅具有可拖动和可拖放功能的缩小jqueryUI来说，33.4 KB太大，无法满足我所需的有限功能。下面的方法不是有效的代码——它只是一个简单的结构，用于可视化需要发生的事情

$('.draggable').on{
  mousemove : function(){
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
        x : pageX,
        y : pageY 
    };
    $(this).css({
      top : mouseposition.y,
      left : mouseposition.y
    });
  if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
    $('.draggable').offset().top < $(.droppable').offset().top 
    &&
    $('.draggable').offset().left < $(.droppable').offset().left
  ) {
      alert('the item has been dropped');
  }
  }
});

$（'.draggable'）。在{
mousemove:function（）{
var mouseposition={//这还需要考虑指针vis-a-vis元素的onclick偏移量
x:pageX，
y:佩吉
};
$（this.css）({
上图：鼠标位置，
左：鼠标位置
});
若（//这个语句有点虚假，那个么我们的想法是通过坐标比较来执行碰撞检测
$（'.draggable'）.offset（）.top<$（.droppable'）.offset（）.top
&&
$（'.draggable'）.offset（）.left<$（.dropable'）.offset（）.left
) {
警报（“项目已被删除”）；
}
}
});

---

看这个。它是核心JS，易于实现。

我知道这是一篇老文章，但我也对在没有Jquery UI的情况下这样做感兴趣。我检查了上面的链接。它只缩小了8kb（我读过，UI可排序~30），并且独立于任何庞大的JQuery库（尽管这些库有时可以让我们的生活更轻松）。

我发现这一个非常有用：

回答基于：

有关排序，请参阅：

var draggable=$（'#dragit'）//元素
可拖动的.on（'mousedown'，函数（e）{
var dr=$（this.addClass（“拖动”）.css（“光标”，“移动”）；
高度=dr.outerHeight（）；
宽度=dr.outerWidth（）；
ypos=dr.offset（）.顶部+高度-e.pageY，
xpos=dr.offset（）.left+width-e.pageX；
$（document.body）.on（'mousemove'，函数（e）{
var itop=e.pageY+ypos-高度；
var ileft=e.pageX+xpos-宽度；
如果（dr.hasClass（“拖动”））{
dr.offset（{top:itop，left:ileft}）；
}
}).on（'mouseup'，函数（e）{
dr.removeClass（“拖动”）；
});
});
#dragit
{
背景：红色；
宽度：50px；
高度：50px；
光标：移动；
位置：相对位置；
}

拖拽我
谢谢你为我介绍了这个过程。这会有帮助的！真正地似乎在为我工作！这是回复：对我来说，是的，还是死了，没有回应-但是谢谢你的新链接。你根本不需要jqueryui css文件来拖放-所以只有缩小的js是~12k