Перетащите перетаскиваемый на сбрасываемый программно и вызовите сброс

Как и в моей скрипке http://jsfiddle.net/meridius/95Wej/, у меня есть некоторые элементы ( draggables), которые я хочу программно (просто с помощью кода, без взаимодействия с пользователем) переместить в соответствующие droppables. Это я могу сделать.

Чего я не знаю, так это почему событие .droppable("drop") не запускается.
Мне нужно droppable, чтобы зарегистрировать, что на нем есть перетаскивание. В противном случае (в моем более сложном setup) есть какое-то странное поведение, когда пользователь перемещает этот перетаскиваемый элемент.

Я пытался .trigger("mousemove"), mousedown, повторно инициализировать .droppable() после .position(), но ничего из этого не помогло.

EDIT:
"Странное" поведение было вызвано поддержкой position:relative;, что я решил, установив его в абсолютное значение перед вызовом .position().
Тем не менее вопрос о том, почему событие не запускается, остается.


jquery position jquery-ui jquery-ui-draggable jquery-ui-droppable
person meridius    schedule 04.11.2013    source источник
comment
возможный дубликат Как нужно ли запускать событие Drop с помощью jQuery UI Droppable без фактического перетаскивания?   -  person apaul    schedule 04.11.2013
comment
Проверьте второй ответ, он должен дать вам то, что вам нужно.   -  person apaul    schedule 04.11.2013
comment
Вот так: jsfiddle.net/95Wej/4   -  person apaul    schedule 04.11.2013
comment
@apaul34208 Спасибо, что показали путь. Но я не могу получить доступ к перетаскиваемому элементу (ui), вызвав функцию .droppable('option', 'drop'), как было предложено; console.log сообщает мне, что ui is undefined. Вот моя обновленная скрипта jsfiddle.net/meridius/95Wej/6 Знаете почему?   -  person meridius    schedule 05.11.2013
comment
stackoverflow.com/a/29284621/   -  person cychoi    schedule 28.03.2015

Ответы (2)


arrow_upward
2
arrow_downward

Обработчик события drop для droppables немного странный. Если вы инициализируете droppable обработчиком событий для события drop следующим образом:

$('div.droppable').droppable({drop: dropFn});

Тогда dropFn является единственной функцией, которая вызывается, когда элемент перетаскивается на droppable, и вы не можете вызвать его, используя только метод .trigger. Вместо этого вам нужно инициализировать droppable без обработчика события для функции drop, а затем позже привязать обработчик события для события drop следующим образом:

$('div.droppable').droppable().on('drop', dropFn);

Инициированные пользователем сбросы не будут затронуты, но теперь вы можете инициировать событие сброса в своем коде. Когда вы делаете это, вы должны предоставить замену объекту ui, описанному здесь, например так:

$('div.droppable').first().trigger('drop', {draggable: ..., helper: ...});

Я перемещаю draggable в droppable, устанавливая положение droppable в "относительное", динамически (используя вызов .css) устанавливая следующий CSS на draggable следующим образом:

div.draggable {
    position: absolute;
    left:     0;
    top:      0;
}

А затем отсоединение и добавление draggable к droppable:

$('div.draggable').first().detach().appendTo($('div.droppable').first());

Мне помог этот ответ: https://stackoverflow.com/a/21279352/1852838.

В своих примерах я всегда использовал первый draggable или droppable, но вы сможете легко настроить его для своего конкретного приложения.

person jeteon    schedule 30.10.2014

arrow_upward
0
arrow_downward

Это не стрельба, потому что вы не роняете элемент туда. Вы используете функцию .position jquery для перемещения перетаскиваемого в выпадающее. Итак, ваша цель — использовать обратный вызов функции перемещения.

$(this).position({
  of: "." + $(this).data("target")
}, function(){
  //do some stuff
});

Поскольку вы находитесь внутри цикла .each, эта функция обратного вызова запускается несколько раз.

person ggzone    schedule 04.11.2013
comment
Нет, моя цель - использовать уже определенную функцию .droppable(drop). Я хотел бы избежать его переопределения, хотя пока это кажется единственным решением, потому что я не могу получить доступ к объекту ui этой функции, как это было предложено @StuperUser в stackoverflow.com/a/3647016/836697. - person meridius; 05.11.2013