构建 UI 拖放生成器

Question

我正在尝试构建一个 UI 拖放构建器。到目前为止，我的问题是当我添加行或复制一行时，我不允许在新的附加行中添加列。如何解决此问题以允许重复或附加的行然后在该行中添加列？

$('.add_or_delete button').click(function() {
  if ($(this).text() == 'Add Row') {
    $(this).parent().parent().append('<div class="row"><div class="col"></div><div class="add_or_delete"><button>Add Column</button><button>Delete Column</button></div></div>');
    make_DragDrop();
  }
  if ($(this).text() == 'Add Column') {
    $(this).parent().parent().append('<div class="col"></div>');
    make_DragDrop();
  }
});

function make_DragDrop() {
  $(".row, #columns").sortable({
    placeholder: "ui-state-highlight",
    forcePlaceholderSize: true,
    connectWith: ".connectedSortable",
  });
  $(".row").disableSelection();
}
make_DragDrop();

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="builder_container">
  <div class="element_picker">
    <div class="select_layouts">
      <ul class="connectedSortable" id="columns">
        <li class="col">1</li>
        <li class="col">2</li>
        <li class="col">3</li>
        <li class="col">4</li>
      </ul>
    </div>
  </div>
  <div class="builder_canvas">
    <div class="canvas_container">
      <div class="section">
        <div class="add_or_delete">
          <button>Add Row</button>
          <button>Delete Row</button>
        </div>
        <div class="row connectedSortable">
          <div class="add_or_delete">
            <button>Add Column</button>
            <button>Delete Column</button>
          </div>
          <div class="col">1</div>
          <div class="col">2</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

正如@Mohamed-Yousef 提到的，您必须将点击事件回调绑定到一个新的动态创建的元素。您可以通过几种方式做到这一点。我尝试使用 .on() 方法，但似乎效果不佳，所以我手动操作了一些。

测试示例：https://jsfiddle.net/Twisty/8fmd1zbc/

$(function() {
  $(".add_or_delete .add-row-btn").click(addRow);
  $(".add_or_delete .add-col-btn").click(addCol);

  function addRow(e) {
    console.log("Adding Row.");
    var newRow = $("<div>", {
      class: "row"
    });
    newRow.append($("<div>", {
      class: "add_or_delete"
    }).append($("<button>", {
      class: "add-col-btn"
    }).html("Add Column").click(addCol), $("<button>", {
      class: "del-col-btn"
    }).html("Delete Column").click()), $("<div>", {
      class: "col"
    }).html("&nbsp;"));
    $(e.target).parents(".section").append(newRow);
    make_DragDrop();
  }

  function addCol(e) {
    console.log("Adding Col.");
    $(e.target).parents(".row").append('<div class="col">&nbsp;</div>');
    make_DragDrop();
  }

  function make_DragDrop() {
    $(".row, #columns").sortable({
      placeholder: "ui-state-highlight",
      forcePlaceholderSize: true,
      connectWith: ".connectedSortable",
    });
    $(".row").disableSelection();
  }

  make_DragDrop();
});

.row {
  border: 1px dashed blue;
  margin: 1em;
}

.row .add_or_delete {
  padding: .2em .4em;
}

.col {
  border: 1px dotted red;
  display: inline-block;
  margin-top: -1px;
  margin-left: -1px;
  width: 100%;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="builder_container">
  <div class="element_picker">
    <div class="select_layouts">
      <ul class="connectedSortable" id="columns">
        <li class="col">1</li>
        <li class="col">2</li>
        <li class="col">3</li>
        <li class="col">4</li>
      </ul>
    </div>
  </div>
  <div class="builder_canvas">
    <div class="canvas_container">
      <div class="section">
        <div class="add_or_delete">
          <button class="add-row-btn">Add Row</button>
          <button class="del-row-btn">Delete Row</button>
        </div>
        <div class="row connectedSortable">
          <div class="add_or_delete">
            <button class="add-col-btn">Add Column</button>
            <button class="del-col-btn">Delete Column</button>
          </div>
          <div class="col">1</div>
          <div class="col">2</div>
        </div>
      </div>
    </div>
  </div>
</div>

您可以看到我在添加时如何将新的单击事件回调绑定到每个按钮。因为我现在不知道存在多少按钮，所以我根据e.target 或事件目标（被点击的元素）创建相对路径。使用.parents() 为我节省了一些代码，因为它会遍历直到找到父选择器。

我可以看出您在此项目的开发中处于早期阶段，强烈建议您为您的元素添加更多适当的类和 id 属性。前面的工作似乎更多，以后会为您节省很多时间。这是一个很好的做法，它使更改或更改您的代码更加容易，因为选择或确认元素变得更加容易。