构建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属性。看起来前面会有更多的工作，这会为你节省很多时间。这是一个很好的做法，因为选择或确认元素变得更容易，所以它使得更改或更改代码更容易。