在同一位置交換來自分開的div的可拖動項

Question

我試圖為帶有Bootstrap的Draggable jQuery做一個很好的例子，到現在為止一切正常，但是我需要做的是：

1. 在我的div.cart之間的同一位置交換div的<div class='col-sm-12'></div> 。

2. 只能在一個div.cart添加1個項目。

演示

 $(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" }); }); 

 #products { float: left; width: 500px; margin-right: 2em; background-color: yellow; } #cart { margin-top: 1em; background-color: #B3B3B3; height: 200px; } 

 <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> 

Answer 1

我認為您可以通過這種方式實現您的目標編輯droppable的accept屬性

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

以這種方式，該函數僅在其中不存在帶有col-sm-4類的元素時才允許可拖動元素