# Revision history [back]

### Drag multiple divs automatically

Hi, I have 3 divs that are connected somehow. I want that when the user drags one of this items the other 2 are drag automatically (so the user can see that they are being dragged too!). How can I do this???? There's no onDrag event to do it by java code....

Thanks!

### Drag multiple divs automaticallyWhen drag div, show like dragging two more divs

Hi, I have 3 divs that are connected somehow. related. I want that when the user drags one of this items the other 2 are drag automatically (so the user can see that they are being dragged too!). How can I do this???? There's no onDrag event to do it by java code....

Thanks!

### When drag div, show like dragging two more divs

Hi, I have 3 divs that are related. I want that when the user drags one of this items the other 2 are drag automatically (so the user can see that they are being dragged too!). How can I do this???? There's no onDrag event to do it by java code....

Thanks!

EDIT: I use the code provided by Cor3000 and it works fine. Now I want that those divs that havn't got the data-related attribute works as always with no customization. I tried the following code but it doesn't work:

var superdiv = {};
zk.override(zul.wgt.Div.prototype, superdiv, {
cloneDrag_: function (drag, ofs) {
if(drag.node.dataset.related == undefined || drag.node.dataset.related == ''){
//superdiv.cloneDrag_.apply(drag,ofs);
superdiv.cloneDrag_.apply(this,arguments);
}else{
var dragContainer = document.createElement("div");

dragContainer.style.position = 'absolute';
//dragContainer.innerText = 'Dragging related nodes'; /*e.g. add a text*/
jq('[data-related=' + drag.node.dataset.related + ']').each(function(index, related) {
var comp  = related.cloneNode(true);
if(index!=0){
comp.style.marginLeft = '100px';
}
dragContainer.appendChild(comp);
})

document.body.appendChild(dragContainer);
return dragContainer;
}
}
});


I don't know how can I call the super event to make it work. The line superdiv.cloneDrag_.apply(this,arguments); doesn't work

### When drag div, show like dragging two more divs

Hi, I have 3 divs that are related. I want that when the user drags one of this items the other 2 are drag automatically (so the user can see that they are being dragged too!). How can I do this???? There's no onDrag event to do it by java code....

Thanks!

EDIT: I use the code provided by Cor3000 and it works fine. Now I want that those To continue using the default drag for all the divs that havn't got the data-related attribute works as always with no customization. I tried use the following code but it doesn't work:code:

var superdiv = {};
zk.override(zul.wgt.Div.prototype, superdiv, {
cloneDrag_: function (drag, ofs) {
if(drag.node.dataset.related == undefined || drag.node.dataset.related == ''){
//superdiv.cloneDrag_.apply(drag,ofs);
return superdiv.cloneDrag_.apply(this,arguments);
}else{
var dragContainer = document.createElement("div");

dragContainer.style.position = 'absolute';
//dragContainer.innerText = 'Dragging related nodes'; /*e.g. add a text*/
jq('[data-related=' + drag.node.dataset.related + ']').each(function(index, related) {
var comp  = related.cloneNode(true);
if(index!=0){
comp.style.marginLeft = '100px';
}
dragContainer.appendChild(comp);
})

document.body.appendChild(dragContainer);
return dragContainer;
}
}
});


I don't know how can I call the super event to make it work. The line superdiv.cloneDrag_.apply(this,arguments); doesn't work

Support Options
• Email Support
• Training
• Consulting
• Outsourcing