Question

以下是我的项目的代码和演示：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>

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类名。如果将它们中的任何一个拖动到表格行上，它将接受它并捕捉到位。如果你试图拖动＆amp;删除除前三个之外的任何图标，它将恢复到原来的位置。

如果您需要进一步澄清，请与我们联系。

将div拖到其他div

1 个答案: