JQuery Nestable - How can I make a dragable element editable?

JQuery Nestable - How can I make a dragable element editable?


Hi All,

I'm using a jquery.nestable.js where I can add new items. The issue is that I've tried to make them editable using the click event but nothing happens.

This is what I've made:

HTML:

<section class="panel panel-margin-settings" id="first-component"> <header class="panel-heading"> <h2 class="panel-title">App 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>Item 1</span></div> </li> </ol> </div> </div> </section>

JS:

// activate Nestable for list 1 $('#nestable').nestable() 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>Item ' + nestablecount + '</span></div></li>'); }); $('#dd-list-app-categories-container').on('click', 'span', 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>'); });

The implementation is in the following link: https://jsfiddle.net/6b3m348q/

What is needed to be done so I can edit the elements' text ? Thanks in advance for your help.