jquery - 如何在Jquery可排序库中制作可编辑或删除的可拖动元素

Question

我遇到一种情况，我需要使用 JQuery Nestable 库，可以编辑或删除列表中的项目。

我尝试为此开发一个解决方案，但它没有按预期编辑或删除项目:

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>');
            });

我在 JSFiddle 中做了一个例子: https://jsfiddle.net/6b3m348q/6/

这个问题的解决方案是什么？

Answer 1

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/

非常感谢维克多!