Wie Sie ein ziehbares Element erstellen, das in der Jquery-Bibliothek bearbeitet oder gelöscht werden kann

Question

Ich habe eine Situation, in der ich die JQuery-Nestable-Bibliothek verwenden muss, in der die Elemente in der Liste bearbeitet oder gelöscht werden können.

Ich habe versucht, eine Lösung für dieses, aber es ist nicht die Bearbeitung noch Entfernen von Elementen zu entwickeln, wie erwartet:

HTML:

<section class="panel panel-margin-settings" id="first-component"> 
    <header class="panel-heading"> 
     <h2 class="panel-title">Categories</h2> 
    </header> 
    <a class="new-category" id="add-new-app-category">+ New Category</a> 

    <div class="panel-body"> 
     <div class="dd" id="nestable"> 
     <ol class="dd-list" id="dd-list-app-categories-container"> 
      <li class="dd-item" data-id="1"> 
       <div class="dd-handle"> 
        <span id="category-item">Item 1</span> 
        <a href="#" class="close close-assoc-file" 
        data-dismiss="alert" aria-label="close">&times;</a> 
       </div> 
      </li> 
     </ol> 
     </div> 
    </div> 
</section> 

JS:

// activate Nestable for list 1 
$('#nestable').nestable() 

// FOR ADDING 
var nestablecount = 1; 
$('#add-new-app-category').click(function() { 
    $('#dd-list-app-categories-container').append('<li class="dd-item" data-id="' + (++nestablecount) + '"><div class="dd-handle"><span id="category-item">Item ' + nestablecount + '</span>' +'<a href="#" class="close close-assoc-file" data-dismiss="alert" aria-label="close">&times;</a>' + '</div>' + '</li>'); 
      }); 


// FOR REMOVING 
$("#dd-list-app-categories-container").on("click", ".close", function (event) { 
    $(this).closest('li').remove(); 

    if (nestablecount > 0) 
     nestablecount--; 
}); 


// FOR EDIT 

$('#dd-list-app-categories-container').on('dblclick', '#category-item', function() { 
       var $input = $('<input type="text" value="' + $(this).text().trim() + '" />'); 
       $(this).replaceWith($input); 
       $input.select(); 
      }).on('blur', 'input', function() { 
       $(this).replaceWith('<span>' + $(this).val() + '</span>'); 
      }); 

machte ich ein Beispiel in JSFiddle: https://jsfiddle.net/6b3m348q/6/

Was ist das so? Lösung für dieses Problem?

Answer 1

Es ist eine große Lösung für dieses Problem, hergestellt von Victor Sulema:

HTML:

<section class="panel panel-margin-settings" id="first-component"> 
    <header class="panel-heading"> 
     <h2 class="panel-title">Categories</h2> 
    </header> 
    <a class="new-category" id="add-new-app-category">+ New Category</a> 

    <div class="panel-body"> 
     <div class="dd" id="nestable"> 
     <ol class="dd-list" id="dd-list-app-categories-container"> 
      <li class="dd-item" data-id="1"> 
       <div class="dd-handle"> 
        <span id="category-item">Item 1</span> 
        <a href="#" class="close close-assoc-file" 
        data-dismiss="alert" aria-label="close">&times;</a> 
       </div> 
      </li> 
     </ol> 
     </div> 
    </div> 
</section> 

JS:

// FOR ADDING 
var nestableCount = 1; 
$('#add-new-app-category').click(function() { 
    var $newItem = $('<li>', { 
     class: '.dd-item', 
     'data-id': ++nestableCount, 
     html: '<div class="dd-handle"><span id="category-item">Item ' + nestableCount + '</span>' +'<a href="#" class="close close-assoc-file" data-dismiss="alert" aria-label="close">&times;</a>' + '</div>' 
    }); 
    $newItem.find('.close').click(removeOnClick); 
    $('#dd-list-app-categories-container').append($newItem); 
    $newItem = null; 
}); 

// FOR REMOVING 
$("#dd-list-app-categories-container .close").on("click", removeOnClick); 
function removeOnClick (event) { 
    $(this).closest('li').remove(); 
    if (nestableCount > 0) {nestableCount--}; 
} 

// FOR EDIT 
$('#dd-list-app-categories-container').on('dblclick', '#category-item', function() { 
    var $input = $('<input type="text" value="' + $(this).text().trim() + '" />'); 
    $(this).html($input); 
    $input.select(); 
    $input = null; 
}).on('blur', 'input', function() { 
    $(this.closest('#category-item')).html($(this).val()); 
    $(this).remove(); 
}); 

JSFiddle: https://jsfiddle.net/6b3m348q/9/

Dank viel Victor!