Как программно вызывать jQuery UI Draggable drag start?

Я создаю новый элемент jQuery после того, как мышь находится в нижнем положении и до того, как она будет выпущена. (После мышки).

Я хотел бы программно запускать dragging в новом элементе с помощью jQuery UI, так что он автоматически начнет перетаскивать мышью. Я не хочу выпускать, а затем снова нажимать на мышь.

Я пробовал следующее...

var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");

... однако это не работает.

Есть ли у кого-нибудь предложения о том, как это сделать?

ОБНОВЛЕНИЕ: После некоторого поиска плаката этот вопрос имеет одинаковую проблему. Однако предлагаемое решение, которое сводится к...

$("body").on("mousedown", function(e) { 
  $("<div />").draggable().appendTo("body").trigger(e);
});

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

Ответы

Ответ 1

Это полный взлом, но, похоже, это трюк:

  var myDraggable = $('#mydraggable').draggable();

  // Yeah... we're going to hack the widget
  var widget = myDraggable.data('ui-draggable');
  var clickEvent = null;

  myDraggable.click(function(event){
      if(!clickEvent){
        widget._mouseStart(event);
        clickEvent = event;
      }
      else {
        widget._mouseUp(event);
        clickEvent = null;
      }
    });

  $(document).mousemove(function(event){
    console.log(event);
    if(clickEvent){
      // We need to set this to our own clickEvent, otherwise
      // it won't position correctly.
      widget._mouseDownEvent = clickEvent;
      widget._mouseMove(event);
    }
  });

Здесь plunker

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

Ответ 2

Плагин draggable ожидает, что его события mousedown используют свое пространство имен и указывают на объект перетаскивания в качестве цели. Изменение этих полей в событии работает с jQuery 1.8.3 и jQuery UI 1.9.2.

$("body").on("mousedown", function(e) { 
  var div = $("<div />").draggable().appendTo("body");
  e.type = "mousedown.draggable";
  e.target = div[0];
  div.trigger(e);
});

Демо здесь: http://jsfiddle.net/maCmB/1/

Ответ 3

Создайте свою перетаскиваемую функцию при наведении указателя мыши

$('#futureDragableElement').mouseover(function() {
  $(this).draggable();
});

Поскольку инициализация с перетаскиванием уже выполнена, ваш первый щелчок мыши будет учтен

Ответ 4

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

Из http://api.jquery.com/trigger/

Любые обработчики событий, связанные с .bind() или одним из ярлыков методы срабатывают, когда происходит соответствующее событие. Они могут быть однако, с использованием метода .trigger(). Вызов .trigger() выполняет обработчики в том же порядке, в каком они были бы, если событие было вызвано пользователем:

$('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');

Ответ 5

Хаки не нужны, если вы создаете элемент во время события, и этот элемент не слишком сложный. Вы можете просто перетаскивать элемент, который имеет mousedown, и использовать свойство перетаскиваемого помощника для создания помощника, который станет вашим новым элементом. На dragStop клонируйте помощника в нужное место в dom.

$('body').draggable({
  helper: function() {
    return '<div>your newly created element being dragged</div>';
  },
  stop: function (e,ui) {
    ui.helper.clone().appendTo('body');
  }
});

Конечно, вам нужно будет установить положение для помощника, так что мышь на нем. Это всего лишь очень простой пример.