Trigger мыши Перетаскивание в JQuery UI

Question

Использование JQuery 1.2.x и JQuery UI 1.5.x, один был в состоянии вызвать перетаскивая вручную следующим образом:

jQuery("#myDiv").mousedown(function(ev) { 
target = jQuery(ev.target); 
if (target.hasClass("drag-me")) { 
    target.draggable({ 
     helper: "clone", 
     start: function() 
     { 
      console.log("drag start"); 
     }, 
     stop: function() 
     { 
      jQuery(this).draggable("destroy"); 
     } 
    }).trigger("mousedown.draggable", [ev]); 
} }); 

Он применяется к следующему HTML:

<div id="myDiv"> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
<div class="drag-me"></div> 
</div> 

Это был удобный способ применить перетаскивание к элементам внутри контейнера, в котором его дети динамически изменялись. Мне нравится называть это «перетаскивание делегаций».

Однако с выпуском jQuery 1.3.x & jQuery 1.6+ сценарий выше перестает работать. Использование jQuery 1.3.2 & jQuery UI 1.7.1 возвращает ошибку «слишком много рекурсии».

Как я могу вызвать перетаскивание вручную? Какие-либо предложения?

Answer 1

Это оказалось намного проще, чем вы ожидали. Глядя на документацию метода .trigger(), не упоминается о том, что исходное событие также можно указать как аргумент, а не просто строковое представление типа события.

Таким образом, можно достичь делегированы более эффективно как и перетаскивание:

$("ul#dynamiclist").delegate("li", "mousedown", function(event) { 
    $(this).draggable({ 
      helper: "clone", 
      cursorAt: { left: 5, top: -5 }, 
      cursor: "move", 
      stop: function() { 
        $(this).draggable("destroy"); 
      } 
    }); }); 

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

Обратите внимание, что это применимо к JQuery 1.4.2 & JQuery UI 1.7.2

Answer 2

Если бы вы могли опубликовать весь образец кода (с HTML & соответствующие теги сценария с нерабочих версий), я мог бы помочь, вероятно, указывают на то, что это неправильно и/или проверить проблему ....

Однако, я m не уверен, что вы хотите передать массив из 1 объекта [ev] в качестве второго параметра для вашего триггерного вызова.

documentation: «Наконец, вы можете передать литеральный объект с данными. Он будет скопирован в реальный объект jQuery.Event. Обратите внимание, что в этом случае вы должны указать атрибут типа».

Вы можете проверить, что он (должен быть выполнен ранее), поскольку вы написали и/или, возможно, вставьте еще один код или URL-адрес на соответствующую страницу? Я был бы рад еще раз взглянуть на это.

Надеюсь, что это поможет. :)

Редактировать: Взять еще один взгляд на него. Он делает именно то, о чем вы просите. На мероприятии mousedown вы делаете что-то, а затем заканчиваете, запуская другое событие mousedown, которое будет делать некоторые вещи, а затем вызывает другое событие мыши и так далее ... и так далее ...

Вы создали бесконечная петля.

Почему бы не просто сделать соответствующие divs перетаскиваемыми при загрузке страницы, а не при первом нажатии? Разве это не позволит избежать этой проблемы?

Также обратите внимание на this post, и мне было бы очень интересно увидеть какой-то код, который раньше работал. Как написано, я не уверен, что я понимаю последовательность того, как код будет эмулировать полное событие «перетаскивания», состоящее из событий mousedown, mousemove и mouse up. Дай мне знать. Благодаря!

Answer 3

Я случае, если вы не используете JQuery 1.4 (и, таким образом, не метод делегата()), есть еще решение.

, что вы должны сделать, чтобы остановить recurssion от встречающейся является stopPropagate вызова() на MouseDown событий для всех элементов:

$('drag-me').mousedown(function(ev){ 
    ev.stopPropagation(); 
}); 

изменить Также ваш код (обратите внимание на вызов stopPropagation() в внизу):

jQuery("#myDiv").mousedown(function(ev) { 
target = jQuery(ev.target); 
if (target.hasClass("drag-me")) { 
     target.draggable({ 
       helper: "clone", 
       start: function() 
       { 
         console.log("drag start"); 
       }, 
       stop: function() 
       { 
         jQuery(this).draggable("destroy"); 
       } 
     }).trigger("mousedown.draggable", [ev]); 
     ev.stopPropagation() 
    } 
}); 

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

Answer 4

Ответы выше кажутся сложными.

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) { 
    $('.draggableObject').trigger(e); 
}); 

Answer 5

другие ответы не работает для меня, я с помощью JQuery плагин Simulate щ

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

$("#myElement").simulate('drag');