Revision history [back]

click to hide/show revision 1
initial version

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

Neus gravatar image Neus

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
Learn More