Sortable: Not able to drag and drop an element if sortable is applied on parent and child both.

[vandanmshah]

I created a BIN of my issue.

Here, I have a structure like STAGE -> In stage there is a card.

Now card and stage both should be sortable.
Note that Here I set "forcefallback: true" because I want to style my dragged element (Both stage as well as cards).

Now here the issue I am facing is I can drag and drop the cards but I am not able to drag and drop the stages SEE:- VIDEO

The desired behavior should something like this:- VIDEO
However, desired behavior comes if i set "forcefallback: false" and in my case i want to apply some custom CSS on dragged element so i can't set "forcefallback: false"

[msh-odoo]

@RubaXa I have the same issue, would you please have a look on this, when I use sortable on parent and child both then it is not working.

[XanderLuciano]

I answered this question on stack overflow: https://stackoverflow.com/questions/49443635/not-able-to-drag-and-drop-an-element-if-sortable-is-applied-on-parent-and-child/49621713#49621713

Here's a jsbin with the working implementation: http://jsbin.com/zizeciniyi/edit?html,css,js,output

[vandanmshah]

Hii @XanderLuciano @RubaXa , I am writing automated testcase to test the drag and drop feature in my project (LIKE THIS). In this testcase I trigger mousedown on stage 1 then mousemove till stage - 3 position and after 50ms of delay I am triggering mouseup on stage - 3 but after mouseup, as per testcase stage - 1 should drop on stage - 3 position but it is dropping on stage - 2 position (SEE THIS).

Also i am writing same automated testcase for cards, However for cards if i drag any card from stage - 1 and I drop that into stage - 3 then it dropped into stage - 3 (SEE THIS). So for cards it works but for stages due to some bug it is not working....

Bin of stage testcase :- BIN
Bin of card testcase :- BIN

[XanderLuciano]

@vandanmshah Questions should be asked on StackOverflow, but since just saying that is less than helpful I went ahead and fixed the test case for you.

jsbin: http://jsbin.com/sozujiduze/edit?js,output

All I did was add a few extra mousemove events as I don't think 1 mousemove event is enough for sortable to fire off all it's functions with fallback mode. It takes at least 1 mouse event just to create the cloned copy. I also stored the elements in variables ahead of time so you aren't query'ing the dom for each function as the number of results will change as items are dragged. For instance, at the start there are 3 elements, but with the fallback option, there are up to 5 by the end, and after each drag move the order will change so hard coding the index value and querying as the test runs can cause it to have an inaccurate position.

Doing the same for the card's test case should fix that issue also.

[vandanmshah]

@RubaXa Is it possible to implement parent-child drag and drop without adding that extra div, because I am implementing this feature on the existing web app so I can't change the structure of existing application... Please answer this question... I stuck because of this issue Thank you...

[msh-odoo]

@XanderLuciano Thanks for your response for adding extra mousemove but same thing works here https://drive.google.com/file/d/1N0-Dfbw4WbkQYjccfGYEnvvhHywZrUIT/view?usp=drivesdk

Do you have any idea why it is not working for 2 stages where stage-1 is dragged and dropped to stage-3 directly?

cc: @RubaXa

[XanderLuciano]

@msh-odoo In that instance I would recommend adding a third mouse move. My thinking is that

1) for registering the mouse out of the stage 1 container
2) registering the mouse in on the stage 3 container
3) registering the mouse in on the sub-container that holds G / H / I.

If that doesn't work, can you provide a code exampe?

[owen-m1]

Set dragoverBubble: true in the options of the '.list-group' sortables, and forceFallback: false

[vandanmshah]

@owen-m1 We cant remove forceFallback: false and with forceFallback: true even if we give dragoverBubble: true it is not working.. Do you have any other option to do that?

[owen-m1]

@vandanmshah I forgot to say you should set forceFallback: false on the parent Sortable. The issue is that with the fallback, the Sortable of the outermost item is never being detected. Using native drag and drop, it is only detecting it if Sortable allows the event to bubble. I will add a fix to this eventually.

[owen-m1]

Solved in commit 43f798804f04ad32856cc0e8d0765ace0428df60
You can now use forceFallback: true and dragoverBubble: true on the outermost Sortable to achieve the desired effect.

[vandanmshah]

@owen-m1 Okay thanks...
cc:- @msh-odoo