Drag & Drop: permit for container but deny when over a child

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Drag & Drop: permit for container but deny when over a child

Joachim Baran
Hi!

  I am having the following problem: I want to allow the user to drag
& drop elements into a spacious container, but only when the dragged
object is not over an already placed item in said container.

  Currently, the container has listeners for 'drop' and 'dragover'
that accept content. Then I added listeners to the child objects
('drop' and 'dragover') that call e.preventDefault(), but it seems
that the container still gets the event.

  Is there a way of preventing the drop when hovering over an object
within the container?

Thanks,
Joachim

--
B.1079 Michael Smith Building
Faculty of Life Sciences
The University of Manchester
Oxford Road
Manchester
M13 9PT
United Kingdom

------------------------------------------------------------------------------
Centralized Desktop Delivery: Dell and VMware Reference Architecture
Simplifying enterprise desktop deployment and management using
Dell EqualLogic storage and VMware View: A highly scalable, end-to-end
client virtualization framework. Read more!
http://p.sf.net/sfu/dell-eql-dev2dev
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Drag & Drop: permit for container but deny when over a child

rsantiagopaz

Im not sure, but try e.stopPropagation() in the child's drop event listener
Reply | Threaded
Open this post in threaded view
|

Re: Drag & Drop: permit for container but deny when over a child

Joachim Baran
On 16 November 2010 17:10, rsantiagopaz <[hidden email]> wrote:
> Im not sure, but try e.stopPropagation() in the child's drop event listener
  I have tried that, but it does not seem to work.

  It looks like the container receives the dragover-/drop-events
whereas its children do not get to see them. I guess that makes sense,
since the container is higher in the event-processing hierarchy (??).

  Anyway, I have rewritten my code to accommodate this situation, but
it would still be nice if the children were able to say "you cannot
drop here". Right now, I have a click-event-listener register with the
children, which always gets called when someone drops something on
these guys. It is not that a big issue, because the users will figure
out this behaviour.. it is just a convenience issue.

Thanks,
Joachim

--
B.1079 Michael Smith Building
Faculty of Life Sciences
The University of Manchester
Oxford Road
Manchester
M13 9PT
United Kingdom

------------------------------------------------------------------------------
Beautiful is writing same markup. Internet Explorer 9 supports
standards for HTML5, CSS3, SVG 1.1,  ECMAScript5, and DOM L2 & L3.
Spend less time writing and  rewriting code and more time creating great
experiences on the web. Be a part of the beta today
http://p.sf.net/sfu/msIE9-sfdev2dev
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Drag & Drop: permit for container but deny when over a child

rsantiagopaz
I was work in some similar. But maybe I am missunderstanding you, because the english.
With some little example maybe I will understand better.

Or try this little example. Drag First label on container or Second label

var doc = this.getRoot();
 
var label1 = new qx.ui.basic.Label("First label");
label1.setDraggable(true);
label1.addListener("dragstart", function(e){
        e.addAction("move");
});

var label2 = new qx.ui.basic.Label("Second label");
label2.setDroppable(true);
label2.addListener("drop", function(e){
        e.stopPropagation();
});
label2.addListener("dragover", function(e){
                e.preventDefault();
        });
   
    var gb1 = new qx.ui.groupbox.GroupBox("gb1");
gb1.setLayout(new qx.ui.layout.Basic());
gb1.setWidth(200);
gb1.setHeight(200);
gb1.setDroppable(true);
gb1.addListener("drop", function(e) {
        alert("drop gb1");
});

gb1.add(label2, {left: 50, top: 50});
doc.add(gb1, {left: 10, top: 10});
doc.add(label1, {left: 250, top: 100});
Reply | Threaded
Open this post in threaded view
|

Re: Drag & Drop: permit for container but deny when over a child

Joachim Baran
On 18 November 2010 11:48, rsantiagopaz <[hidden email]> wrote:
> I was work in some similar. But maybe I am missunderstanding you, because the english.
  Your example is excellent! I never tried to use both listeners
together. The 'click'-event is still fired, but at least it looks more
consistent now.

Thanks a lot,
Joachim

--
B.1079 Michael Smith Building
Faculty of Life Sciences
The University of Manchester
Oxford Road
Manchester
M13 9PT
United Kingdom

------------------------------------------------------------------------------
Beautiful is writing same markup. Internet Explorer 9 supports
standards for HTML5, CSS3, SVG 1.1,  ECMAScript5, and DOM L2 & L3.
Spend less time writing and  rewriting code and more time creating great
experiences on the web. Be a part of the beta today
http://p.sf.net/sfu/msIE9-sfdev2dev
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel