When drag div, show like dragging two more divs

asked 2015-12-10 10:03:27 +0800

Neus
1415 ● 14

updated 2015-12-24 12:32:13 +0800

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. To continue using the default drag for all the divs that havn't got the data-related attribute use the following 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; 
            }
        } 
    });