从相同位置的分隔 div 交换可拖动项目答案

【问题标题】：Swap draggable items from separated divs in the same position从相同位置的分隔 div 交换可拖动项目
【发布时间】：2015-01-11 10:04:22
【问题描述】：

我尝试用 Bootstrap 为 Draggable jQuery 制作一个很好的例子，它现在工作正常，但我需要可拖动交换 div。

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>

查询：

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我无法弄清楚真正困扰你的是什么，但我发现提供的小提琴有两个问题：

我的 JS 指令顺序错误（你必须切换第 5 行和第 6 行）
您尚未导入 JS 和 CSS Bootstrap 资源，因此 col-sm-XX 类将不起作用。

您可以在这里找到clean working copy of your JSFiddle。

【讨论】：