Передвигать одновременно несколько элементов

[todd-barry]

Доброго времени суток. Возникла новая проблема - необходимо написать код при помощи плагина draggable, который реализует перетаскивание нескольких объектов одновременно.
То есть: на странице имеется, например два блока div и один блок span. Пользователь кликает по одному из блоков div и перетаскивает его. вслед за этим блоком перетаскиваются два других div'а и span.
Помогите пожалуйста

[Dmitriyff]

эм... не понял вашего примера.

до

|-раздел 1
|--под раздел 1
|--под раздел 1
|-раздел 2
|--под раздел 2
|--под раздел 2

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

после

|-раздел 2
|--под раздел 2
|--под раздел 2
|-раздел 1
|--под раздел 1
|--под раздел 1


или ваши два других div'а b span находятся в другом месте страниы и никак не связаны с блоком div по которому идет клик?

[todd-barry]

Два других дива и спан никак не связаны с блоком див, по которому кликнули

[DjDiablo]

КАК div'ы связаны ?

[todd-barry]

Он не связаны никак, то есть могут быть и связаны, но их расположение все время различное

[DjDiablo]

я перефразирую

на странице допутим 100 div'ов
как определить те которые надо двигать
по какому признаку ?

хрен с ним с компьютером
даже я недогадаюсь какие двигать надо из этой сотни, если ты недаш мне подсказку

[todd-barry]

Определить те, что нужно двигать как раз не проблема. Ну пусть нужно двигать дивы с индексами eq:1, eq3 и eq:5. Это не так принципиально. Меня гораздо больше интересует, как их заставить передвигаться синхронно

[DjDiablo]

ну с этого надо было нечинать.
Короче некак ))))))))))

зато можно, менять координаты других div'ов следом за тем предметом который перемещают.

$( "#draggable" ).draggable({
start: function() {
// что то при старте
},
drag: function( event, ui) {
//функция срабатывает при перемещении
$(".moveRect").offset( { left:ui.offset.left, top:ui.offset.top } )
},
stop: function() {
// что то при окончании перемещения
}
});

[todd-barry]

Я догадывался, что это возможно только таким способом. Просто хотелось все реализовать более элегантно. Спасибо большое :)

[todd-barry]

А как определить, на сколько сдвинулся перетаскиваемый элемент?

[todd-barry]

Тоесть, сейчас другие дивы автоматически встают в ту же позицию, что и перемещаемый див. А мне нужно реализовать:
$('.other_div').offset().top + ui.offset.top - изначальная позиция перемещаемого элемента

задавать ее в start, а затем использовать в drag не срабатывает

[todd-barry]

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

[DjDiablo]

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() {
// что то при окончании перемещения
}
});


должно срабытывать :/

[todd-barry]

DjDiablo, реализовывал точно так же. Сейчас попробую еще раз, может где то допустил ошибку в синтаксисе

[todd-barry]

Что то с рассчетом неправильно - другой див ведет себя очень странно
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() {
// что то при окончании перемещения
}
});

[todd-barry]

Все получилось. Огромное спасибо,DjDiablo

[DjDiablo]

$(this) - this не на то указывает на что вы думаете))

Вам же нужно что то вроде

el=$("div").eq(0);
el.offset( { left:el.offset().left+left, top:el.offset().top+top } );


Все получилось
Ну и клёво ))))

[todd-barry]

$(this) - this не на то указывает на что вы думаете))
Да, я уже понял ошибку ) Вставил часть кода в общий скрипт - что то снова возникли неполадки.

Вроде, бы это последний момент. Если разберусь с этим, все остальные плагины вставлю аналогичным образом. Надеюсь на вашу помощь, в последний раз :)
$(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 дива, они получают возможность передвигаться. При этом, передвигая один из них - за ним должны тащиться два других. Затем, при отмене выделения любого из них, он теряет возможность быть передвигаемым и перестает тащиться за перемещаемым дивом

[DjDiablo]

в твоём примере ты меняешь координаты томуже элементу который и двигаешь, естественно остальные не двигаются. С какого они должны двигаться если ты им координаты не меняешь.

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


//все дивы можно выделять
$( "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 который двигаем исключим из выборки при помощи not

$('.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() {
// что то при окончании перемещения
}
});

[todd-barry]

в твоём примере ты меняешь координаты томуже элементу который и двигаешь, естественно остальные не двигаются.
Эх, я еще плохо понимаю, как работает javascript. Мне показалось, что таким образом будут двигаться все выделенные дивы