javascript 没有 JQuery UI 的拖放

Drag and drop without JQuery UI

提问by Googlebot

I searched a lot to find a tutorial for drag & drop with jQuery alone (without UI), but due to the popularity of JQuery UI, all drag and drop features are based on JQuery UI.

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

Can anyone give me a hint how to make a basic Drag & Drop by JQuery standalone?

谁能给我一个提示，如何通过 JQuery 独立制作基本的拖放？

采纳答案by Evan

I think a good starting place might be to map out the process, and then decide which jQuery tools you will need to use for each user action.

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

so the user process might be:

所以用户进程可能是：

• Click on your content div on a "draggable" area
• Drag the content, which will keep the content inside that div
• release the mouse, which will put the content into a "droppable" container, which will adjust the size of the previous content to fit the droppable size

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

which needs the following types of event listeners:

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

• mouseup
• mousedown
• animate

• 鼠标向上
• 鼠标按下
• 动画

At the very least. Another option might be to check out the jQuery UI source, and see how they do it! Which will tell you exactly what to do but you can add to it or trim where necessary.

至少。另一种选择可能是查看 jQuery UI 源代码，看看他们是如何做到的！这将准确地告诉您要做什么，但您可以在必要时添加或修剪。

回答by COLD TOLD

There are several plugins that you may use take a look at the following

您可能会使用几个插件，请查看以下内容

http://wayfarerweb.com/jquery/plugins/animadrag/

http://wayfarerweb.com/jquery/plugins/animadrag/

http://threedubmedia.com/code/event/drag/demo/

http://threedubmedia.com/code/event/drag/demo/

it still jquery but no UI

它仍然是 jquery 但没有 UI

回答by thezillion

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

See this. It's core JS and easy to implement.

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

回答by Yousef Salimpour

I found this one very useful: http://draggabilly.desandro.com/

我发现这个非常有用：http: //draggabilly.desandro.com/

回答by tim

Came across the same problem, and 33.4 kilobytes for the minified jqueryUI with only draggable and droppable is too large for the limited functionality I needed. The approach below isn't working code - it's just a simple structure to visualize what needs to happen.

遇到了同样的问题，对于我需要的有限功能来说，只有可拖动和可放置的缩小 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');
  }
  }
});

回答by CrandellWS

Answer based on: https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui

答案基于：https: //www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui

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

排序也许见：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>

Constrain movement

约束运动

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>

回答by Todd

I understand this is an old post, but i was also interested in doing this without Jquery UI. I checked the links above, but i found this to be the best. It's only 8kb minified (UI sortable ~30, i've read), and is independent of any mammoth JQuery library (although those CAN make our lives easier sometimes).

我知道这是一篇旧帖子，但我也有兴趣在没有 Jquery UI 的情况下执行此操作。我检查了上面的链接，但我发现这是最好的。它只有 8kb 缩小（UI 可排序 ~30，我读过），并且独立于任何庞大的 JQuery 库（尽管这些库有时可以让我们的生活更轻松）。