Question

我有可排序的行，一行可以包含带有块的列。列内的块也是可排序的。

目标是对列的整个行列和块进行排序。并且还应该可以通过拖放来添加新块。

可排序（行和块）没有任何问题：

  ...
  $(".column").sortable({
    connectWith: ".column"  // .column contains blocks
  });
  $("#manager").sortable({
    items: ".row"  // .row contains columns
  });
  ...

要添加新块我有一个工具箱，它包含可能的新元素（行和块）。如果已经有一行，添加新元素也可以毫无问题地工作。

$(function() { 
  $(".column").sortable({
    connectWith: ".column"
  });
  $("#manager").sortable({
    items: ".row"
  });
  $("#components div").draggable({
    connectToSortable: ".column",
    helper: "clone"
  });
});

但我无法解决以下用例：

如果没有行（空页），应该可以通过拖放来添加新块。

这需要在拖动块时添加新行。

添加新行可以正常工作，但是在开始拖动时我无法在创建的行上初始化sortable。

$(function() { 
  $(".column").sortable({
    connectWith: ".column"
  });
  $("#manager").sortable({
    items: ".row"
  });
  $("#components div").draggable({
    connectToSortable: ".column",
    helper: "clone",
    start: function() {
      $("#manager").append("<div class='row'><div class='column'></div><div class='column'></div></div>")
      $(".column").sortable({
        connectWith: ".column"
      });        
    }
  });
});

.row {
    width: 500px;
    height: 100px;
    background: fuchsia;
    border: 1px solid black;
}

.column {
    width: 200px;
    float: left;
    border: 1px solid blue;
    background: red;
    height: 100px;
}

.block {
    width: 100%;
    height: 100%;
    background: green;
}

#components div {
    height: 20px;
    width: 200px;
    background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="manager">
    <div class="row">
        <div class="column"><div class="block"></div></div>
        <div class="column"></div>
    </div>
    <div class="row">
        <div class="column"><div class="block"></div></div>
        <div class="column"></div>
    </div>
    
</div>
<br />
<br />
<br />
<br />
<br />
<div id="components">
    <div>Textblock</div>
</div>

到目前为止我尝试了什么，没有成功：

覆盖内部mouseStart拖动事件 - ＆gt;导致对象的内部状态出现问题。 Check this SO question
在mousedown事件中添加新元素 - ＆gt;立即停止拖动

在拖动开始

0 个答案: