Question

我尝试使用 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>

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

Answer 1

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

我持有一个错误的JS指令（你必须转换第5和第6行）
您尚未导入JS和CSS Bootstrap资源，因此col-sm-XX类无效。

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

从处于相同位置的分隔div中交换可拖动项目

1 个答案: