Jquery UI Sortable + Bootstrap可变高度Divs排序问题答案

【问题标题】：Jquery UI Sortable + Bootstrap variable height Divs sorting issueJquery UI Sortable + Bootstrap可变高度Divs排序问题
【发布时间】：2016-01-14 15:25:08
【问题描述】：

需要您的帮助来解决有关使用引导程序进行 UI 排序的问题，我可以在引导程序中实现此可排序功能，但仍有一个问题无法自行解决。我的小提琴链接：http://jsfiddle.net/wrtfp513/

问题：在这里（检查我的小提琴）我分为三个部分（.part1，.part2，.part3）我可以在这三个部分中的任何地方对我的“测试”内容进行排序，但是当我排序时所有“测试”内容都进入“part1”存在问题“无法分别排序到 .part2 和 .part3”

我的代码：

<div class="container">
    <div id="drag_holder" class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 part1">
           <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 1</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting indu  Ipsum.</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 2</div>
                  <div class="panel-body">Contfghfghent</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 3</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry </div>
              </div>
            </div>
        </div>

        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 part2">
             <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 4</div>
                  <div class="panel-body">Content</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 5</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry.  </div>
              </div>
            </div>
        </div>


        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4  part3">
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 6</div>
                  <div class="panel-body">Content</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 7</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry.   1500s, when an unknown printer took a galley of type  t  </div>
              </div>
            </div>
        </div>


    </div>
</div>

脚本：

$(function () {
var demos =$("#drag_holder");
    demos.sortable({
         items: ".drag_content",
       placeholder: "panel"
    });

});

提前谢谢各位..

【问题讨论】：

标签： jquery-ui jquery-ui-sortable jquery-draggable

【解决方案1】：

现在您正在使用 Jquery UI 进行拖放（可排序）。我理解你的问题。这可能是您指出的 Jquery UI 中的一个问题。因此，您可以使用 dragula.js 来实现拖放功能，而不是使用 this（Jquery UI）。它在放置带有阴影的目标元素时有一个很棒的功能。

在这里查看：http://bevacqua.github.io/dragula/

【讨论】：