One-com / knockout-dragdrop

A drag and drop binding for Knockout.
BSD 3-Clause "New" or "Revised" License
85 stars 29 forks source link

Sorting in a treeview #7

Closed roscopeeco closed 10 years ago

roscopeeco commented 10 years ago

Hello

I've been playing around with the drag drop code and have created an smaller example of a treeview that I have been setting up that incorporate drag drop.

The example is js fiddle http://jsfiddle.net/Bp7XG/ is not working but i have the example working correctly on my local machine.

In the example dragItem is the function that is called when drag/drop is taking place. Everything is re-ordered correctly BUT i am having to traverse down the tree to get the correct building item to be removed in the reorder function. This seems a little long winded. I need to get the correct reference to the array that the drag data is currently in but can't see how to do this with the data passed to the function.

When i try referencing zoneData sometimes it returns a site, sometimes a buidling. It's not clear what the usage of this is.

I can post the full source here or email if possible.

Thanks

Ross

roscopeeco commented 10 years ago

The fiddle is now working http://jsfiddle.net/Bp7XG/

roscopeeco commented 10 years ago

Hello again

I've managed to make it generic by passing in a key & collection reference iniitially.

When the drag starts the collection is assigned to data.zoneData, In the reorder function dragData is removed from data.zoneData and finally data.zoneData is set to zoneData[key]. ...

function dragItem(data, collection, key) {

this.start=function (item) {
    data.zoneData=collection;
    item.dragging(true);
};

this.end=function (item) {
    item.dragging(false);
    delete data.zoneData;
};

this.reorder=function (event, dragData, zoneData) {

    if (dragData !== zoneData && typeof zoneData[key]!='undefined') {
        var zoneDataIndex = zoneData[key].indexOf(zoneData);
        data.zoneData.remove(dragData);
        zoneData[key].splice(zoneDataIndex, 0, dragData);
        data.zoneData=zoneData[key];
    }

};

return this;

} ...

sunesimonsen commented 10 years ago

Glad that you found a solution to your problem.