Question

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

＆＃13;

$('.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();

＆＃13;

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

＆＃13;

Answer 1

提到@ Mohamed-Yousef时，您必须将click事件回调绑定到新动态创建的元素。你可以通过几种方式实现这一目标。我尝试使用.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属性。这似乎是更多的工作，它将为您节省大量时间。这是一个很好的做法，因为选择或确认元素变得容易得多，所以它可以更容易地更改或更改你的代码。

构建UI拖放构建器

1 个答案: