Swap draggable items from separated divs in the same position

Question

I tried to make a nice example for Draggable jQuery with Bootstrap , it's working fine till now , but i need the draggable swap the divs .

HTML :

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

JQUERY:

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

score 1 · Answer 1 · answered Jan 11 '15 at 11:14

I can't figure out what is really bothering you, but I have find out two issues with the provided fiddle:

I was holding a wrong JS instruction order (You had to swith the 5th and 6th lines)
You haven't imported the JS and CSS Bootstrap resources so that the col-sm-XX class would have no effect.

Here you can find a clean working copy of your JSFiddle.

Swap draggable items from separated divs in the same position

1 Answers1