CODEWITHSUNDEEP
angularjsjquery-ui-sortableangular-ui
Kate
Kate

Reputation: 31

Connected Nested Lists in Angular with UI Sortable

I would like to implement the following:

Connected Nested Lists in Jquery UI Sortable

using Angular and the Angular Jquery UI Sortable. I need parents and children containers that are both sortable. Parents that you can rearrange the order (within the set of parents) and children that you can rearrange and also drag to a different parent.

Is it possible with the Jquery UI Sortable Angular directive or do I have to create a new directive for having nested lists?

Here is a jsFiddle that was created to solve the previous question: http://jsfiddle.net/HG8k6/4/ 

$("ul.containers").sortable({
    placeholder: "ui-state-highlight-container",
    revert: true,
    forcePlaceholderSize: true,
    axis: 'y',
    start: function (e, ui) {
        //alert("started");
    },
    update: function (e, ui) {
        //alert("updated");
        //save();
    }
});

function SetSortableRows(rows)
{
    rows.sortable({
    placeholder: "ui-state-highlight-row",
    connectWith: "ul.rows:not(.containers)",
    containment: "ul.containers",
    helper: "clone",
    revert: true,
    forcePlaceholderSize: true,
    axis: 'y',
    start: function (e, ui) {
        //alert("started");
    },
    update: function (e, ui) {
        //alert("updated");
        //save();
    }
});

}

Upvotes: 3

Views: 2060

Answers (2)

Peter Huang
Peter Huang

Reputation: 1178

I think you can do two ui sortable, and connected them together.

Upvotes: 0

user2756349
user2756349

Reputation: 11

Take a look at angular-ui-tree: https://github.com/JimLiu/angular-ui-tree. It does exactly this.

Upvotes: 1

Related Questions