我做错了什么：支持Bootstrap拖放的可排序列表？

Question

这是我的代码：

 <div class="row">
  <div id="herschik-helper" class="col-lg-12 col-md-12 col-xs-12 text-center" style="display:none; margin-bottom: 15px;">
   1. Drag and sort<br>2. When finished click Save
  </div>
 </div>
 <ul class="list-unstyled" id="sortable">';
    while($aRow = $selectTabbladen->fetch(PDO::FETCH_ASSOC)) {
    ......
    print '
     <li id="tabid_li_'.$tab_id.'">
      <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
       <a href="#" id="'.$tab_id.'" name="'.$tab_name.'" class="tab_data" role="button">
        <div class="panel panel-box">
         <div class="panel-top"><img src="'.$pad.$tab_icon.'"></div>
         <div class="panel-info">
          <span class="ng-scope">'.$tab_name.'</span>
         </div>
         <div class="panel-bottom bg-light">
          <i class="fa fa-file-text-o"></i>';
          <span class="badge-notify">'.$aantal.'</span>
         </div>
        </div>
       </a>                    
      </div>
     </li>';

脚本：

$('.herSchikken').on('click',function() {
    $('#herschik-helper').slideDown('slow');
    $('.herSchikken').html('<i class="fa fa-save"></i>');
    $('.herSchikken').prop("id","opslaan");
    $('.herSchikken').prop("title","Opslaan");
    $('.tab_data').css("cursor","move");
    $('ul#sortable').sortable({ tolerance: 'pointer' });
    $("#opslaan").click(function( e ) {
        if( !$("#opslaan c").length ) {
            $('.herSchikken').html('<i class="fa fa-cog fa-spin"></i>');
            $('ul#sortable').sortable('destroy');
            $('#herschik-helper').html('<i class="fa fa-refresh fa-spin" style="font-size: 25px; color: #fff;"></i>');
            var h = [];
            $('ul#sortable li').each(function() {  h.push($(this).attr('id').substr(9));  });
            alert (h);
            $.ajax({
                type: "POST",
                url: "herschikken_update.php",
                data: {ids: " " + h + ""},
                success: function(html) {
                    window.location.reload();
                    //showTabbladen(html);
                }
            }); 
            return false;
        }   
        e.preventDefault();     
    });
});

除了拖动和排序之外，一切都有效。我已经尝试了所有方法：

   connectWith: "....",
   items: "...",
   revert: true,
   placeholder: 'placeholder',
   forceHelperSize: true,
   zIndex: 9999

正在从数据库中读取数据。你会得到 4 行，每行 4 列。我想在我想要的地方对任何列进行排序。

就我而言，如果我想移动一个 col，那么一切都在移动。 你看不清我点击的女巫坤以及我想移动它的位置。

谁可以帮助我意识到这一点，并指出如何使用占位符以最佳方式处理它？

如果我删除此行，则所有内容都显示在另一行下方：

<div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">

但随后我可以对所有内容进行排序。

如何在不删除此行的情况下完成此操作？这类似于我想要 http://jsfiddle.net/ramnathv/1064q7jm/

感谢您的帮助

Answer 1

我已经解决了。

我替换了这一行：

<ul class="list-unstyled" id="sortable"><li>....

这个：

<div class="row sortable">