0

When drag div, show like dragging two more divs

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

Neus gravatar image 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; 
            }
        } 
    });
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

answered 2015-12-15 03:22:18 +0800

cor3000 gravatar image cor3000
4332 1 7
ZK Team

updated 2015-12-15 03:37:18 +0800

Hi Neus.

since drag and drop initially happens on the client side you can override a number of client side functions to customize this behavior (http://books.zkoss.org/wiki/ZKClient-sideReference/Customization/Drag-and-Drop_Effects)

I created a small example to show the basic principle http://zkfiddle.org/sample/1rbom3p/1-custom-drag-and-drop

It uses data-attributes to identify related divs to clone them into the same dragContainer. But any mechanism will work.

I use the client/attribute namespace to set the data attributes. To assign these values from java you can use setClientDataAttribute (or in ZK <=7 setWidgetAttribute)

Robert

link publish delete flag offensive edit

Comments

It seems what I'm looking for! Thank you!

Neus ( 2015-12-15 08:43:59 +0800 )edit

Hi I still have some problems with this. See the new text on my post... Thank you!

Neus ( 2015-12-24 12:21:53 +0800 )edit

Ok...it's missing the return before the line superdiv.cloneDrag_.apply(this,arguments);. Now it works

Neus ( 2015-12-24 12:28:21 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

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

Seen: 40 times

Last updated: Dec 24 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More