可在引导列中放置 Jquery UI答案

【问题标题】：Jquery UI droppable inside bootstrap columns可在引导列中放置 Jquery UI
【发布时间】：2015-09-30 08:22:43
【问题描述】：

使用 Jquery UI，我试图将元素拖放到引导列中。一个简单但行不通的想法，你可以自己试试：

它只落在第一个引导列内

jQuery UI Draggable with Bootstrap layout

并尝试添加

 .ui-draggable-handle {
     z-index: 1;
 }

 .ui-draggable-dragging {
     z-index: 10000!important
 }

到 css，但没有帮助。

【问题讨论】：

不幸的是，在解决问题时，我添加了重复的 id 错误。我最初的问题是使用没有样式的可拖动元素（甚至是引导类的成员）。见这里：link 所以添加样式对我有帮助。需要样式宽度和高度的原因是，可放置元素对进入其形状的可拖动元素的中心做出反应。因此，具有不同大小的可拖动引导程序会导致问题......

标签： jquery-ui

【解决方案1】：

Id 应该是唯一的，所以如果你想要两个可放置的区域，请改用class：

<div id="droppable2" class="droppable col-xs-3">
    <p>Drop
        <br>here</p>
</div>
<div id="droppable2" class="droppable col-xs-3">
    <p>Drop
        <br>here</p>
</div>

和

$(".droppable").droppable({
    drop: function (event, ui) {
        $(this).find("p").html("Dropped!");
    }
});

Working demo

【讨论】：

非常感谢。这实际上也不是我的问题。如果没有你的帮助，我会放弃的。