在同一位置交换来自分开的div的可拖动项

Question

I tried to make a nice example for Draggable jQuery with Bootstrap, it's working fine till now but what I need to make is:

1. Swap the div s <div class='col-sm-12'></div> that I created between the div.cart with same place.

2. Can add 1 item only in one div.cart .

Demo

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

I think that you could achieve your goal editing accept property of droppable in this way

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

in this way the function will allow the draggable elements only if there is no element with class col-sm-4 inside it