可使用引导列排序的 Jquery UI - 右手边下降将较低的行向下推答案

【问题标题】：Jquery UI sortable with bootstrap columns - right hand edge drop pushes lower rows down可使用引导列排序的 Jquery UI - 右手边下降将较低的行向下推
【发布时间】：2018-04-22 12:53:10
【问题描述】：

我创建了一个使用 JQuery UI 1.12.1、JQuery 3.1.0 和 Bootstrap 3.3.7 的测试脚本。

除了一个问题，我几乎都在工作。我在下面创建了小提琴

https://jsfiddle.net/woldsnewmedia/aLm44L8p/

问题是当一个 Div 被拖到一个 Div 的右侧边缘时，所有东西都会跳下来。有人发现我哪里出错了吗？代码在这里：-

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/scripts/css/bootstrap.min.css" /><!-- v3.3.7 -->
    <script type="text/javascript" src="/scripts/js/jquery-3.1.0.min.js"></script><!-- v3.1.0 -->
    <script type="text/javascript" src="/scripts/js/bootstrap.min.js"></script><!-- v3.3.7 -->
    <script type="text/javascript" src="/scripts/js/jquery-ui.js"></script><!-- v1.12.1 -->

  <style type="text/css">

    .dragdrop-placeholder {
        background-color:red;
        margin-top:18px!important;
        margin-left:15px!important;
    }

    .hnd1{
        height:200px;
        background-color:blue;
    }

  </style>

  <title></title>

<script type="text/javascript">

$( document ).ready(function() {

    $('.wrow1').sortable({

        connectWith: ".wdragdrop1",
        handle: ".wdragdrop1",
        placeholder: "dragdrop-placeholder",

        update: function (e, ui) { 
                var widget_ids = $(this).sortable('toArray').toString();
                console.log(widget_ids);
              },

        start: function(e, ui){
         ui.placeholder.width(ui.item.find('.wdragdrop1').width());
         ui.placeholder.height(ui.item.find('.wdragdrop1').height());
         ui.placeholder.addClass(ui.item.attr("class"));
        }

    });


});

</script>

</head>

<body>
  <div class="container">
    <div class="row wrow1">
        <div class="col-md-3 col-sm-3" id="1">

            <div class="wdragdrop1">
                <h3 class="hnd1">Box 1</h3>
            </div>

        </div>
        <div class="col-md-3 col-sm-3" id="2">

            <div class="wdragdrop1">
                <h3 class="hnd1">Box 2</h3>
            </div>

            </div>
        <div class="col-md-3 col-sm-3" id="3">

            <div class="wdragdrop1">
                <h3 class="hnd1">Box 3</h3>
            </div>

            </div>
        <div class="col-md-3 col-sm-3" id="4">

            <div class="wdragdrop1">
                <h3 class="hnd1">Box 4</h3>
            </div>

            </div>
        <div class="col-md-3 col-sm-3" id="5">

            <div class="wdragdrop1">
                <h3 class="hnd1">Box 5</h3>
            </div>

            </div>
        <div class="col-md-3 col-sm-3" id="6">

            <div class="wdragdrop1">
                <h3 class="hnd1">Box 6</h3>
            </div>

            </div>
    </div>
</div>


</body>

</html>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap-3 jquery-ui-sortable

【解决方案1】：

所有 col-**-# 的总和应为每行 12 个。如果更多，则下一个元素将转到下一行。

【讨论】：

感谢您的回复。但是，如果您查看jsfiddle.net/woldsnewmedia/aLm44L8p 的小提琴，您会发现布局只会在拖动过程中出现混乱。否则布局看起来很好。尝试将加载后的“Box 1”拖动到“Box 4”上，您会明白我的意思。