Hello Team, I am trying to drag an element's bottom right corner which is not working for me. I have even used

@4tw/cypress-drag-drop

.move method, unfortunately no success. I have created a simple project with my application. If someone could help me, will be great. https://github.com/mekalag/cypressProj.git

After playing around a little bit, it seems like a lot is going on in the DOM when clicking/dragging is taking place. During resize, the resize handle element is swapped out in the DOM with another element, and brought back when the resize ends. I haven't worked with this library before, and at a glance I don't see where the

mousemove

event listener actually is... it's not on the original resize-handle. So it's not too surprising that the test code (which looks fine) doesn't do anything in this instance. So I don't have a solution for you at the moment except to point you in the direction of figuring out how that feature is implemented. Between the resize functionality itself and the list parent + grid snapping, there sure is plenty happening at once, and it seems like it's not the typical drag and drop implementation we might see other places.

Hi Mark, thanks a lot for taking a look into my concern. I also thought that it's something to do with the way how the drag is implemented in my application. Meanwhile, I was trying the same in testcafe framework. With a simple .drag command it works great. So this was the testcafe 2 line code to drag the same element which I tried in cypress.

await  t
            .hover(dragEle)
            .drag(dragEle, 200, 200);

So now, I wonder if it's my application the way it's implemented or cypress not being able to drag. I expected atleast

@4tw/cypress-drag-drop

plugin will have some methods to get around with this easily. But no success.

Hmm I’ll be curious to dig into this some more. There’s plenty of drag stuff that works fine in cypress with the kind of test you wrote.

great thank you so much !

Lol, after a week's break from any code at all I decided to loop back and the next thing I tried worked right away. The implementation being tested seems to need more than one

mousemove

event. So this, for example, works for me:

cy.get('.asset-alarms > .resize-handle')
            .trigger('mousedown', { eventConstructor: 'MouseEvent', })
            .trigger('mousemove', {
                clientX: 0,
                clientY: 0,
                eventConstructor: 'MouseEvent',
            })
            .trigger('mousemove', {
                clientX: 600,
                clientY: 600,
                eventConstructor: 'MouseEvent',
                force: true
            })
            .trigger('mouseup', {force: true})

Hopefully this unblocks you for the moment. I set the first

clientX

and

clientY

to

0

, just cause I'm speculating that the first event is used by the library to enter the 'resizing' state, and the position doesn't matter. Only the position for subsequent

mousemove

events appears to be used. This also explains why we need to

force: true

the later events - in the resizing state, the handle has been hidden. It gives me a few ideas going forward about maybe suggesting an update to the

move

command from

cypress-drag-drop

, to fire more than one set of

pointermove

and

mousemove

events during a move. Which would get it working for this case and presumably other similar drag situations.

Hey Mark, thats a great finding. I am so glad that you spend time for my concern. Thank you very much 😇 It works perfectly fine now