Действительно ли возможно связать два jquery.ui draggables вместе?
У меня есть два jquery.ui draggables. Я ограничиваю их перемещение к оси y. Если Вы перетаскиваетесь к определенному y-position, я хочу, чтобы другой автоматически переместился в тот же y-position и наоборот. Кто-либо когда-либо соединял два из них прежде?
3 ответа
Updated: Обновлен скрипт и демо, так что он больше не ограничивается осью y при перетаскивании.
Этот скрипт ищет класс "group", за которым следует число для перетаскивания этих объединенных объектов. Я разместил здесь демонстрацию.
HTML
<div class="demo">
<div id="draggable">
<p>Drag from here</p>
<div class="dragme group1"><img src="image1.jpg"><br>Group 1</div>
<div class="dragme group1"><img src="image2.jpg"><br>Group 1</div>
<div class="dragme group2"><img src="image3.jpg"><br>Group 2</div>
<div class="dragme group2"><img src="image4.jpg"><br>Group 2</div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script
$(document).ready(function() {
// function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
var getAll = function(t) {
return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
};
// add drag functionality
$(".dragme").draggable({
revert: true,
revertDuration: 10,
// grouped items animate separately, so leave this number low
containment: '.demo',
stop: function(e, ui) {
getAll(ui).css({
'top': ui.helper.css('top'),
'left': 0
});
},
drag: function(e, ui) {
getAll(ui).css({
'top': ui.helper.css('top'),
'left': ui.helper.css('left')
});
}
});
$("#droppable").droppable({
drop: function(e, ui) {
ui.draggable.appendTo($(this));
getAll(ui).appendTo($(this));
}
});
});
Я не делал этого раньше, но я предлагаю использовать событие drag для настройки положения соответствующего другого элемента:
$('.selector').draggable({
...,
drag: function(event, ui) {
},
...
});
Объект ui будет содержать информацию (в свойстве ui. offset) можно использовать для ручной перестановки другого элемента.
Вы должны явно задать ось Y обоих элементов.
Для этого либо в функциях обработчика событий обоих элементов необходимо задать Y-ось, либо привязать оба элемента одной и той же функцией.
Счастливое кодирование.