jquery - 将 div 拖到另一个 div

Question

这是我元素的代码和DEMO:http://jsbin.com/erofot/1

我想做什么？

我希望用户只能将 .draggabledivs 移动到表格中(表格/.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>

Answer 1

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

$(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 .

为了帮助说明功能，我向前 3 个可拖动元素 添加了一个额外的 accept_me 类名。如果您将它们中的任何一个拖到表格行上，它就会接受它并卡入到位。如果您尝试拖放除前三个图标之一以外的任何图标，它会恢复到原来的位置。

如果您需要进一步说明，请告诉我。