将分离的div中的可拖动物品交换到相同的位置

Question

我试图用Bootstrap为Draggable jQuery做一个很好的例子，它到目前为止工作正常，但我需要做的是：

1. 将我在div之间创建的<div class='col-sm-12'></div> div.cart与同一位置交换。

2. 只能在一个div.cart中添加1个项目。

演示

＆＃13;
＆＃13;
$(function() {
  $("#catalog div").draggable({
    appendTo: "body",
    helper: "clone"
  });

  $(".cart ").droppable({
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        $(this).find(".RemoveDIV").remove();
        $("<div class='col-sm-4'></div>").text(ui.draggable.text()).appendTo(this);

      }
    })
    .sortable({
      connectWith: ".cart"
    }).sortable({
      items: " > div"
    });
});
＆＃13;
#products {
  float: left;
  width: 500px;
  margin-right: 2em;
  background-color: yellow;
}
#cart {
  margin-top: 1em;
  background-color: #B3B3B3;
  height: 200px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container" style="height:220px;background-color:gray;">
  <div id="catalog">
    <div>
      <div class="col-sm-3 color">Test1</div>
      <div class="col-sm-3 color1">Test2</div>
      <div class="col-sm-3 color">Test3</div>
    </div>
  </div>
</div>
<div id="bigContainer">
  <div class="container" style=" margin-top:10px;">
    <div class="cart col-sm-6" style="height:250px;background-color:#043F35;">
      <div class="RemoveDIV">Add your items here</div>
    </div>
    <div class="cart col-sm-6" style="height:250px;background-color:#BC0F76;">
      <div class="RemoveDIV">Add your items here</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

我认为你可以用这种方式实现你的目标编辑droppable的accept属性

accept: function(draggable) {
        return $(this).find(".col-sm-4").length == 0;
}

这样，只有当里面没有类col-sm-4的元素时，该函数才允许可拖动元素