JQueryネスト可能ライブラリで編集または削除できるドラッグ可能な要素の作成方法

Question

リスト内の項目を編集または削除できるJQueryネスト可能ライブラリを使用する必要がある場合があります。

私は、このためのソリューションを開発しようとしましたが、期待通りにその項目を編集したり削除しない：

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

ビクター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/

どうもありがとうございましたビクターは！