Erstellen eines UI-Drag & Drop-Generators

Question

Ich versuche, einen UI-Drag & Drop-Builder zu erstellen. Mein Problem ist bisher, dass ich beim Hinzufügen und Zeilen oder Duplizieren einer Zeile keine Spalten innerhalb der neuen angehängten Zeile hinzufügen darf. Wie kann ich dieses Problem lösen, damit doppelte oder angehängte Zeilen Spalten innerhalb dieser Zeile hinzufügen?

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

Wie @Mohamed-Yousef erwähnt, haben Sie einen Click-Ereignis Rückruf zu einem neuen dynamisch erstellten Elemente zu binden. Sie können dies auf verschiedene Arten tun. Ich habe versucht, mit .on() Methode und das schien nicht gut zu funktionieren, so dass ich ein wenig mehr manuell ging.

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

Sie können sehen, wie ich einen neuen Click-Ereignis Rückruf an jede Taste binden, wenn ich es hinzufügen. Da ich jetzt nicht weiß, wie viele Buttons existieren, mache ich relative Pfade basierend auf dem e.target oder dem Event-Target, dem Element, auf das geklickt wurde. Die Verwendung von .parents() spart mir ein wenig Code, da es durchlaufen wird, bis es diesen Elternselektor findet.

Ich kann sehen, Sie sind früh in Ihrer Entwicklung dieses Projekts und würden dringend empfehlen, mehr richtige Klassen und ID-Attribute zu Ihren Elementen hinzuzufügen. Es scheint mehr Arbeit im Voraus zu sein und es wird dir viel Zeit später ersparen. Es ist eine gute Übung und macht es viel einfacher, Ihren Code zu ändern oder zu ändern, da das Auswählen oder Bestätigen eines Elements viel einfacher wird.