Как сделать эмуляцию Drag and Drop?

Question

[fokas]

Имею дело с web файловым менеджером. Часто приходится выполнять действие Drag and Drop. Это долгая и монотонная задача. Какими способами можно эмулировать перетаскивание div#file в div#folder?

Я не владею навыками инспектирования в браузере и врядли разберусь, что на самом деле происходит под капотом сайта со стороны клиента. Но написать пользовательский скрипт могу. Могу подключить библиотеку, например JQuery. На сайте скорее всего React.

Полагаю, это относится к теме разработки автоматических тестов пользовательских интерфейсов.

Answer 1

[Stalker_RED]

Для jquery есть draggable и dropzone. Разобраться "что на самом деле происходит" тоже не особо сложно.

Не совсем понятно зачем нужно эмулировать. Скорее всего достаточно посмотреть в инспекторе какие команды уходят на сервер при перетаскивании, и можете отправлять их сколько угодно вообще в обход интерфейса.

Это если там нет никаких хитрых защит, чтобы юзер таскал именно мышкой. А если хитрые защиты есть, то и эмуляция может обломаться (если проверяется isTrusted, например).

Comments

[fokas]

Эмулирование - это решение на поверхности. Оно вообще не требует знать, что происходит. Мало ли, если там вдруг не все просто окажется. Мне привычно пользоваться всякими Auto Click Extreme и iMacros. Javascript могу использовать благодаря общему навыку программирования, справочнику по языку и поисковику. Просто поэтому :)

Этот код работает без проблем. Врядли там есть хитрые защиты

function click(targetNode) {
if (targetNode) {
//--- Симуляция нажатия
triggerMouseEvent (targetNode, "mouseover");
triggerMouseEvent (targetNode, "mousedown");
triggerMouseEvent (targetNode, "mouseup");
triggerMouseEvent (targetNode, "click");
}
else
console.log ("*** Target node not found!");
}

function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}