Передвигать одновременно несколько элементов
Доброго времени суток. Возникла новая проблема - необходимо написать код при помощи плагина draggable, который реализует перетаскивание нескольких объектов одновременно.
То есть: на странице имеется, например два блока div и один блок span. Пользователь кликает по одному из блоков div и перетаскивает его. вслед за этим блоком перетаскиваются два других div'а и span. Помогите пожалуйста |
эм... не понял вашего примера.
до |-раздел 1 |--под раздел 1 |--под раздел 1 |-раздел 2 |--под раздел 2 |--под раздел 2 это пример дерева, вас интересует возможность поменять местами разделы, но так чтобы и подразделы тоскались вместе с разделами? после |-раздел 2 |--под раздел 2 |--под раздел 2 |-раздел 1 |--под раздел 1 |--под раздел 1 или ваши два других div'а b span находятся в другом месте страниы и никак не связаны с блоком div по которому идет клик? |
Два других дива и спан никак не связаны с блоком див, по которому кликнули
|
КАК div'ы связаны ?
|
Он не связаны никак, то есть могут быть и связаны, но их расположение все время различное
|
я перефразирую
на странице допутим 100 div'ов как определить те которые надо двигать по какому признаку ? хрен с ним с компьютером даже я недогадаюсь какие двигать надо из этой сотни, если ты недаш мне подсказку |
Определить те, что нужно двигать как раз не проблема. Ну пусть нужно двигать дивы с индексами eq:1, eq3 и eq:5. Это не так принципиально. Меня гораздо больше интересует, как их заставить передвигаться синхронно
|
ну с этого надо было нечинать.
Короче некак )))))))))) зато можно, менять координаты других div'ов следом за тем предметом который перемещают.
$( "#draggable" ).draggable({
start: function() {
// что то при старте
},
drag: function( event, ui) {
//функция срабатывает при перемещении
$(".moveRect").offset( { left:ui.offset.left, top:ui.offset.top } )
},
stop: function() {
// что то при окончании перемещения
}
});
|
Я догадывался, что это возможно только таким способом. Просто хотелось все реализовать более элегантно. Спасибо большое :)
|
А как определить, на сколько сдвинулся перетаскиваемый элемент?
|
Тоесть, сейчас другие дивы автоматически встают в ту же позицию, что и перемещаемый див. А мне нужно реализовать:
$('.other_div').offset().top + ui.offset.top - изначальная позиция перемещаемого элемента задавать ее в start, а затем использовать в drag не срабатывает |
Проще говоря, нужно передвигать другие дивы не в ту же позицию, что и перемещаемый див, а на расстояние, на которое был передвинут перемещаемый див
|
var oldLeft, oldTop;
$( "#draggable" ).draggable({
start: function(event, ui) {
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
drag: function( event, ui) {
// считаем координаты на сколько уехали от старта.
var left=oldLeft-ui.offset.left
var top=oldTop-ui.offset.top
//left - на сколько сдвинулись по горизонтали
//top на сколько по вертикали
//здесь двигай свои div
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
stop: function() {
// что то при окончании перемещения
}
});
должно срабытывать :/ |
DjDiablo, реализовывал точно так же. Сейчас попробую еще раз, может где то допустил ошибку в синтаксисе
|
Что то с рассчетом неправильно - другой див ведет себя очень странно
var oldLeft, oldTop;
$( "div" ).draggable({
start: function(event, ui) {
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
drag: function( event, ui) {
var left=ui.offset.left-oldLeft;
var top=ui.offset.left-oldTop;
$("div").eq(0).offset( { left:$(this).offset().left+left, top:$(this).offset().top+top } );
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
stop: function() {
// что то при окончании перемещения
}
});
|
Все получилось. Огромное спасибо,DjDiablo
|
$(this) - this не на то указывает на что вы думаете))
Вам же нужно что то вроде
el=$("div").eq(0);
el.offset( { left:el.offset().left+left, top:el.offset().top+top } );
Цитата:
|
Цитата:
Вроде, бы это последний момент. Если разберусь с этим, все остальные плагины вставлю аналогичным образом. Надеюсь на вашу помощь, в последний раз :)
$(document).ready(
function (event) {
var arr = new Array();
$("body").selectable({
selected:
function(event, ui){
var a = ui.selected;
var oldLeft, oldTop;
$(a).draggable({
start:
function(event, ui) {
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
drag:
function( event, ui) {
var left=oldLeft-ui.offset.left;
var top=oldTop-ui.offset.top;
$(a).offset( { left:$(a).offset().left-left, top:$(a).offset().top-top } );
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
stop:
function() {
// что то при окончании перемещения
}
});
},
unselecting:
function(event, ui){
var r = ui.unselecting;
$(r).draggable({ cancel: "button" });
},
unselected:
function(event, ui){
var r = ui.unselected;
$(r).draggable({ cancel: "button" });
},
stop:
function(event, ui){
}
});
}
)
Проблемы: 1. Другие выделенные дивы перестали передвигаться синхронно 2. При отмене выделения элемента, возможность передвигать его сохраняется Суть кода в том, что, выделив, например 3 дива, они получают возможность передвигаться. При этом, передвигая один из них - за ним должны тащиться два других. Затем, при отмене выделения любого из них, он теряет возможность быть передвигаемым и перестает тащиться за перемещаемым дивом |
в твоём примере ты меняешь координаты томуже элементу который и двигаешь, естественно остальные не двигаются. С какого они должны двигаться если ты им координаты не меняешь.
В двух словах мысль и спать, проверять отлаживать слишком поздно, затра только если.
//все дивы можно выделять
$( "div" ).selectable();
//все дивы можно таскать
$("div").draggable({
start: function(event, ui) {
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
drag: function( event, ui) {
var left=oldLeft-ui.offset.left;
var top=oldTop-ui.offset.top;
var th=this;// а может ui или this.el - короче ссылка на dom элемент к которому прикреплён dragable, посмотри в доках как сделать
// когда div перемещается за ним тащатся все остальные выделенны.
// сам div который двигаем исключим из выборки при помощи [B]not[/B]
$('.ui-selected"').not(th).each(function(){
$(this).offset( { left:$(this).offset().left-left, top:$(this).offset().top-top });
});
oldLeft=ui.offset.left;
oldTop=ui.offset.top;
},
stop: function() {
// что то при окончании перемещения
}
});
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:21. |