The question is simple, but can't really find an answer.
How to simulate the drag & drop events using chrome developer tools ?
sure i can manually drag & drop the file, but then i can't inspect the changes in DOM.
The question is simple, but can't really find an answer.
How to simulate the drag & drop events using chrome developer tools ?
sure i can manually drag & drop the file, but then i can't inspect the changes in DOM.
Share Improve this question asked Jun 28, 2016 at 5:40 user1935987user1935987 3,34712 gold badges63 silver badges113 bronze badges2 Answers
Reset to default 6You can simulate Drag & Drop events with the jQuery Simulate library and the Drag & Drop extension for it, which uses the mousedown, mousemove and mouseup events to achieve it.
You can also use Event Listener Breakpoints to pause execution on certain events. With the library above, you could pause execution on those mouse events.
You may drag and drop and observe the CSS class that gets activated. For example, jquery ui uses ".ui-state-hover"
Then you can edit the HTML tag in the Developer tools to add the class ui-state-hover and it will show permanently as if you're dragging something over it.
<li class="ui-tree-droppoint ui-droppable ui-state-hover">