jquery - 将div拖到其他div

这是我的项目的代码和DEMO：http://jsbin.com/erofot/1

我想做的事？

我想让用户只能将.draggabledivs移动到表中（table / .dropable div）
我希望用户可以在表（天）之间水平移动div。

<script>
  $(function() {
    $( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
        helper: "clone"});
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>

最佳答案

您正在寻找可拖动元素上的“还原”选项，以及可放置方法中的“接受”选项：

$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', snap: "#dropable"});
$( "#drop_here td" ).droppable({
  accept: '.draggable.accept_me',
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
  });
});

我已经更新了您的JSBin。

为了帮助说明功能，我在前三个可拖动元素中添加了一个附加的accept_me类名。如果将它们中的任何一个拖到表行上，它将接受它并定位到位。如果您尝试拖放前三个图标之一以外的任何图标，它将恢复为原始位置。

让我知道您是否需要进一步澄清。

关于jquery - 将div拖到其他div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17019310/