Эмуляция drag-and-drop с использованием JavaScript

Я знаю, что jQuery может программно запускать события на элементах DOM, которые слушают эти события. Например, $el.click() вызовет событие щелчка на $el без физического щелчка мыши $el с помощью мыши.Эмуляция drag-and-drop с использованием JavaScript

Учитывая два DOM элемента dom1 и dom2, можно программно эмулировать перетащить и падение с dom1 к dom2 с помощью JQuery (или ванильный JavaScript), где dom1 является перетаскивание и dom2 является Droppable с помощью JQuery UI.

Примечание: Причина, по которой я хочу сделать это, - это автоматизированные тесты пользовательского интерфейса.

источник

2012-01-20 Randomblue

«триггер перетащить и падение» немного расплывчатым. Полагаю, вы хотите создать интерфейс стиля перетаскивания, но вы имеете в виду «Я хочу использовать [несуществующие] встроенные события перетаскивания»? – Bojangles

@JamWaffles: Я отредактировал вопрос. У меня есть элементы, которые можно перетаскивать и отбрасывать. Я хочу вызвать перетаскивание на этот элемент без использования мыши, просто написав код JavaScript. – Randomblue

Вы должны помнить, что jQuery.trigger не запускает событие HTML, то есть вызов .click не приведет к ссылке. Он запускает только события, заданные с помощью jQuery.

http://jupiterjs.com/news/syn-a-standalone-synthetic-event-library - это библиотека, которая действительно имитирует события HTML. Это очень простой в использовании

Следующая утверждает, что «привет» была удалена со страницы:

Syn.click({},'hello') 
    .type('Hello World') 
    .delay()   //waits 600ms seconds by default 
    .drag($('#trash') , function() { 
    ok($('#hello').length == 0, "removed hello") 
});

источник

2012-01-20 19:58:42

Я обычно использую jquery.ui для сложных вещей, с затягиванием сбрасывания: http://jqueryui.com/demos/draggable/

источник

2012-01-20 10:15:44 netadictos

Я не думаю, что это отвечает на мой вопрос. У меня есть элементы, которые * уже * перетаскиваются и недоступны. Я хочу запускать события «drag» и «drop» без ручного выполнения (с помощью мыши). – Randomblue

@Randomblue Вы уже используете jQuery UI или другой плагин? В любом случае должны быть функции обратного вызова и соответствующая документация. Если этого не произошло, вы можете либо расширить/исправить плагин самостоятельно (если он находится на Github, либо как), либо использовать другой плагин. – Bojangles

Возможно, вы на самом деле после анимации, которая эмулирует движение элемента по другому? Если да, то чем это связано с взаимодействием с пользователем? –

-2

Вы всегда можете использовать Drag-Sort plugin.

Example usage

источник

2012-01-20 10:16:42

Если Youre с помощью пользовательского интерфейса, то есть события dragstartdrag и dragstop на перетаскиваемом поведение. Вы должны иметь возможность ссылаться на них программно, используя jQuery.trigger(), как и любое другое событие, но вам нужно вручную манипулировать экземпляром event, так или иначе я бы подумал вручную ввести координаты, в которые вы хотите, чтобы элемент был удален, и я не уверен, насколько хорошо это будет работа или почему вы хотели бы это сделать.

источник

2012-01-20 10:20:49 prodigitalson

Я пытаюсь написать тесты пользовательского интерфейса. – Randomblue

Ahhh ... теперь все имеет смысл - вы должны добавить, что это для тестов пользовательского интерфейса в вашем вопросе :-) Какую структуру тестирования вы используете? – prodigitalson

Я использую Selenium WebDriver, но у него есть недостатки для перетаскивания. – Randomblue

Вы хотите, чтобы анимация переместилась к новому родителю. Проверьте функцию в JQuery - animate moving DOM element to new parent?

источник

2012-01-20 10:33:20

Эмуляция drag-and-drop с использованием JavaScript

ответ

Смежные вопросы