Create a tree view using Knockout. Tree is draggable/draggable and nodes can be deleted. Try it out here: kotree.herokuapp.com
-
jquery
-
jquery-ui
-
knockout
-
knockout.mapping
[{id: 1, name: item1, projects: [{id: 2, name: item2, projects: []}]}, {id: 3, name: item3, projects: []}]
In Rails, you can check out my example on editing the json format in the projects model.
def as_json(options = {}) { id: id, name: name, projects: self.projects.collect {|n| n.as_json} } end
ko.bindingHandlers.droppable = { init: function(element, valueAccessor, allBindingsAccessor, data, context) { $(element).droppable({ drop: function(event, ui) { var dropped = $(this).data('id'); var dragged = $(ui.draggable).data('id'); $(ui.draggable).remove(); $.ajax({ url: 'projects/' + dragged + '.json', type: 'PUT', data: {'project': {'project_id': dropped}} }).done(function() { self.loadProjects(); }); } }); $(element).draggable({ revert: true }); } };
<ul class="nav nav-list" data-bind="template: {name: 'projects_template', foreach: projects}"> </ul> <script type='text/html' id='projects_template'> <li data-bind="attr: {'data-id': $data.id, class: 'project-nav-li'}, droppable: $root"> <span href='#' data-bind='html: "<a href=\"#\">" + name() + "</a>"'></span><span class='pull-right project-delete' data-bind='click: $root.deleteProject'><i class='icon-trash'></i></span> </li> <ul class="nav nav-list" data-bind="template: {name: 'projects_template', foreach: projects}"> </ul> </script>