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，那么一切都在移动。你无法清楚地看到我已经点击了我想要移动它的地方。

谁可以帮助我实现这一点，并指出如何使用占位符来处理它？</ p>

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

<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">

我做错了什么：可排序列表支持拖动和放大为Bootstrap掉线？

1 个答案: