logo标签列表

无需使用JQuery UI即可进行拖放操作

javascriptjquerydrag-and-dropdraggable
16
我搜索了很多关于使用jQuery单独实现拖放功能的教程（不使用UI），但由于JQuery UI的普及，所有的拖放功能都基于JQuery UI。
有人可以给我一些提示如何使用独立的jQuery实现基本的拖放吗？
2
http://jsfiddle.net/tovic/mkUJf/ - Darknight
7个回答
12
8
我认为一个很好的起点可能是绘制流程图，并决定每个用户操作需要使用哪些jQuery工具。
所以用户过程可能是：
- 点击“可拖拽”区域上的内容div - 拖动内容，将内容保留在该div内 - 释放鼠标，将内容放入“可放置”容器中，该容器将调整先前内容的大小以适应可放置大小
这需要以下类型的事件侦听器:
- mouseup - mousedown - animate 至少是这样。另一个选择可能是检查jQuery UI源代码，看看他们是如何做到的！这将告诉您要做什么，但您可以根据需要添加或删除。
感谢您对这个过程进行了解释，这将会很有帮助！ - Googlebot
3
1
真的吗？对我来说似乎是有效的！这是存储库链接：https://github.com/desandro/draggabilly - Yousef Salimpour
嗯，还是没有反应，对我来说仍然是死的 - 不过感谢提供新链接。 - knutole
3
2

我遇到了同样的问题，对于只需要可拖动和可放置功能的最小化jqueryUI，33.4千字节太大了。下面的方法不是工作代码 - 它只是一个简单的结构来可视化需要发生什么。

$('.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');
  }
  }
});
实际上，您不需要jqueryui css文件来进行拖放操作 - 因此只需最小化的js即可达到约12k。 - Stephen
2
最初的回答：基于https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui的答案。

for sorting perhaps see: http://johnny.github.io/jquery-sortable/ 

var draggable = $('#dragit'); //element 

draggable.on('mousedown', function(e){
 var dr = $(this).addClass("drag").css("cursor","move");
 height = dr.outerHeight();
 width = dr.outerWidth();
 ypos = dr.offset().top + height - e.pageY,
 xpos = dr.offset().left + width - e.pageX;
 $(document.body).on('mousemove', function(e){
  var itop = e.pageY + ypos - height;
  var ileft = e.pageX + xpos - width;
  if(dr.hasClass("drag")){
   dr.offset({top: itop,left: ileft});
  }
 }).on('mouseup', function(e){
   dr.removeClass("drag");
 });
});
#dragit
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dragit">Drag me</div>

约束运动

最初的回答 

var draggable = $('#dragit-contained'); //element 

draggable.on('mousedown', function(e){
 var dr = $(this).addClass("drag").css("cursor","move");
 height = dr.outerHeight();
 width = dr.outerWidth();
 max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
 max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
 min_left = dr.parent().offset().left;
 min_top = dr.parent().offset().top;

 ypos = dr.offset().top + height - e.pageY,
 xpos = dr.offset().left + width - e.pageX;
 $(document.body).on('mousemove', function(e){
  var itop = e.pageY + ypos - height;
  var ileft = e.pageX + xpos - width;
  
  if(dr.hasClass("drag")){
   if(itop <= min_top ) { itop = min_top; }
   if(ileft <= min_left ) { ileft = min_left; }
   if(itop >= max_top ) { itop = max_top; }
   if(ileft >= max_left ) { ileft = max_left; }
   dr.offset({ top: itop,left: ileft});
  }
 }).on('mouseup', function(e){
   dr.removeClass("drag");
 });
});
.draggable-area
  {
    background: grey;
    width: 320px;
    height: 240px;
  }
#dragit-contained
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="draggable-area">
 <div id="dragit-contained">Drag me</div>
</div>

1

我知道这是一个旧帖子，但我也对不使用Jquery UI进行此操作感兴趣。我检查了上面的链接，但我发现这个是最好的选择。它只有8kb的压缩大小（UI sortable大约30kb），并且不依赖于任何巨大的JQuery库（尽管有时候这些库可以使我们的生活更轻松）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接