Search code examples
drag-and-dropmootoolsjquery-ui-sortable

Mootools Drag+Drop+Sortable same time?


What I try to do is to have 2 blocks, one with all "field types" available and an other where they can be drop and sort. It must only work in one way, From the field types To the droppable zone.

For the moment I achieved to do 2 things, make my list of fields in the droppable zone sortable, and make the drag and drop working (I used the mootools doc http://mootools.net/demos/?demo=Sortables).

BUT, and here is the problem, my user need to drag the field to my droppable zone, and then after he can sort it. I can't find a way to make the field sortable directly during the drag moment.... It's a nightmare.

I hope you can understand my problem and help me. I've searched all over the internet but it seems nobody made example for this.

Thanks !


Solution

  • So after a looooooooong search and test in all ways possible I found a solution :

    • Create a sortable bloc for the droppable zone
    • Create a drag and drop bloc from the field type zone to the sortable bloc
    • In the new Drag.Move add onEnter and onLeave, and in that use sorter.addItems to add the item directly to the the sortable zone on entering it and at the opposite sorter.removeItems when leaving
    • One last thing is to start the sorter after adding an item and ending it after removing one (onEnter/onLeave)

    That's it ! I hope it will help some other people.