HTML：

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/

非常感谢Victor！

如何创建一个可拖动的元素，可以在Jquery Nestable库

HTML：

JS：

1 个答案:

HTML：

JS：