jquery - 将 div 拖到其他 div

Question

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

我想做的事？

我希望用户只能将 .draggabledivs 移动到表中（table/.dropable div） 我希望用户可以在 table(days) 之间水平移动 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

您正在寻找可拖动元素上的 'revert' 选项，以及 droppable 方法上的 'accept' 选项：

$(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中添加了一个额外的类名。如果您将它们中的任何一个拖到表格行上，它将接受它并卡入到位。如果您尝试拖放前三个图标之一以外的任何图标，它将恢复到原来的位置。

如果您需要对此进一步澄清，请告诉我。