JQuery: Как я могу имитировать перетаскивание кода?

EDIT: Здесь ссылка, чтобы показать вам мой пример кода: http://www.singingeels.com/jqtest/

У меня очень простая страница, которая ссылается на jquery-1.3.2.js, ui.core.js(последняя версия) и ui.draggable.js(также последняя версия).

У меня есть div, который я могу легко перемещать (используя мышь, конечно):

<div id="myDiv">hello</div>

а затем в JavaScript:

$("#myDiv").draggable();

Это прекрасно работает. Но мне нужно смоделировать "перетаскивание", используя только код. У меня это в основном работает, но проблема в том, что события, которые срабатывают, являются событиями-заполнителями.

Если вы откроете "ui.core.js" и прокрутите до конца... вы увидите следующее:

// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }

Почему в моей симуляции не расширяются события, но когда вы нажимаете мышкой, они есть? - Любые идеи о том, как заставить свойство _mouseDrag: подчиняться надстрочному расширению в "ui.draggable.js"?

Решение этого было бы огромным - и я планирую показать основные преимущества позже.

Спасибо, -Timothy

EDIT: Здесь ссылка, чтобы показать вам мой пример кода: http://www.singingeels.com/jqtest/

РЕДАКТИРОВАТЬ 2: Нажмите эту ссылку выше и просмотреть источник... вы увидите, что я пытаюсь сделать. Вот фрагмент:

$(document).ready(function() {
    var myDiv = $("#myDiv");

    myDiv.draggable();

    // This will set enough properties to simulate valid mouse options.
    $.ui.mouse.options = $.ui.mouse.defaults;

    var divOffset = myDiv.offset();

    // This will simulate clicking down on the div - works mostly.
    $.ui.mouse._mouseDown({
        target: myDiv,
        pageX: divOffset.left,
        pageY: divOffset.top,
        which: 1,

        preventDefault: function() { }
    });
});

Ответ 1

В форуме JQuery есть вопрос . Он не был разрешен на момент написания, но может иметь больше информации в будущем.

EDIT: На форуме был дан ответ:

Я рекомендую вам использовать модуль имитации, который использует пользовательский интерфейс jQuery для перетаскивания модулей:

https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

Вы можете увидеть примеры использования, просмотрев модульные тесты

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js

Благодаря rdworth для этого.

Ответ 2

Я нашел решение, которое работает очень хорошо. У меня есть вызов события переадресации с функцией onDragAndDrop(). Эта функция принимает два аргумента: объект draggable jQuery и объект droppable jQuery.

$('.my-drop-target').droppable({
    drop: function(event, ui) {
        onDragAndDrop(ui.draggable, $(event.target));
    }
});

В моих тестах у меня есть функция, которая вызывает onDragAndDrop напрямую, но гарантирует, что пользователь с помощью мыши мог выполнить это действие.

    var simulateDragAndDrop = function(draggable, droppable) {
        if (!draggable.data('uiDraggable')) {
            throw new Error('Tried to drag and drop but the source element is not draggable!');
        }
        if (!droppable.data('uiDroppable')) {
            throw new Error('Tried to drag and drop but the target element is not droppable!');
        }
        onDragAndDrop(draggable, droppable);
    }

Я нашел, что это хорошее, простое в использовании решение для модульных тестов. Я, вероятно, в конечном итоге буду использовать его для доступа к клавиатуре.

Ответ 3

Вам нужно показать код, который вы используете, чтобы "имитировать" это. Мой интуитивный инстинкт - вам нужно построить соответствующие события DOM и запустить их, но я не знаю, есть ли у jQuery возможности для инъекции искусственных событий.

Не могли бы вы просто вызвать обработчики событий напрямую?