構建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屬性。看起來前面會有更多的工作，這會爲你節省很多時間。這是一個很好的做法，因爲選擇或確認元素變得更容易，所以它使得更改或更改代碼更容易。