I have set up a onDragDrop event, which when triggered gets triggered twice, once by the item being dropped on, and once by the container for it, which is a dropzone. How can I stop the event from bubbling. I believe that's the term for what's occuring. I tried doing Event.stopPropagation(); but that didn't seem to do anything.
Perhaps try returning false, or setting e.cancel to true.
nope, doesn't make any difference.
I have noticed that the order of the events assignments dictates when the event is triggered. If I set the ddtarget area, then set the drag element, when the ddtarget is initialized after the drag element, the ddtarget is the last event to bubble.
But, if I initialize the drag element, then initialize the ddtarget area, the ddtarget is the last bubbling item.
Here is a live example... http://www.foirc.net/
Replication Instructions:
1) Open example site, click on the + icon in the center panel toolbar to add a column.
2) Drag one of the boxes into the new column.
3) Drag another box into the new column.
4) Drag the second box over the first box, and release drag.
At this point, since the events bubble, the last event to bubble is the ddtarget which causes the box to always be appended to the column as the last element. If you attempt this with the initial two columns which are loaded by default, since they are initialized before the ddproxy, the last event triggered is the item being dropped on. Which is the functionality I want. Drag a box over another box, then the box is placed before the item being dropped on.
In my understanding there is two ways to solve this problem. One, I could somehow disable the event from bubbling through to the ddtarget. Second, I could somehow change the weight of DD event triggers, so that I could have the events returned in a particular order. Problem is, I have no idea on how to do this with ExtJS.. Please, can someone give me an idea, hint, or something which can help me resolve this problem?
Hello? Does anyone have any idea about how to stop triggering two onDragDrop events? I've been trying everything,
Ext.dd.DragDropMgr.stopPropagation = true;
Event.stopPropagation();
Event.stopEvent();
Event.cancel = true;
Ext.dd.DragDropMgr.stopEvent(Event);
Ext.dd.DragDropMgr.lock();
Ext.dd.DragDropMgr.unlock();
Nothing is fricken working. I'm getting really fustrated with this, and I am not getting any responses. Please, someone with knowledge of DragDrop functionality take a look at this, and help a fellow developer out. PLEASE!! and Thank You!!
When you say Event.method(), I assume you're referring to the event object that is being passed to the callback handler?
Correct... Here is a sample of the code.
Code:rz.dd.onDragDrop = function(Event, OverID) {
Ext.dd.DragDropMgr.lock();
// alert(OverID.length);
alert(OverID);
// alert(OverID[0]);
// alert(OverID[1]);
// alert(OverID[2]);
if (OverID.match(/^Home/)) {
Ext.get(OverID).appendChild(rz.el);
FOIRC.FixWidths();
} else if (OverID.match(/rzwrap\$/)) {
rz.el.insertBefore(OverID);
} else {
alert(OverID);
}
rz.el.dom.style.zIndex='auto';
Event.stopEvent();
Event.cancel = true;
Ext.dd.DragDropMgr.stopEvent(Event);
Ext.dd.DragDropMgr.unlock();
return false;
};
Ok, well try something different:
Code:var isFired = false;
inner.ondragdrop = function()
{
//do stuff
isFired = true;
}
outer.ondragdrop = function()
{
if (!isFired)
//dostuff
isFired = false;
}
I do not think that will work. There is only one drag item, so I don't see how I can set up two separate onDragDrop events. Also, if you read my posts about this, sometimes the drop triggers are reversed. The problem is that the element which is being dropped on, will sometimes trigger before, or after the parent element which is the container for the element being dropped on.
I need some way of preventing the parent element from being triggered, So that only the exact element being dropped on will be triggered, and that's it.
Also, sometimes the drag element is being dropped just onto the container, and sometimes on an element in the container which then causes the drag element to be moved so that it's ahead of the element being dropped on.
I also observed this phenomenon. Instead of trying to stop the propagation of events between the two potential drop-targets, I defined a 'notifyDrop' method on the drop-target that I wanted to handle the event. Then in my 'onDragDrop' method, I checked for the existence of that method on the drop target objects. If it had the method, then I called it and let the drop-target handle the logic from that point on. That way even though the event is fired twice, only the target that can handle it actually gets the flow control.
In my DDProxy subclass:
In my DDTarget subclass:Code:onDragDrop: function(e, drag_id){
var DDM = Ext.dd.DragDropMgr;
var my_dd = DDM.getDDById(drag_id);
if(my_dd.notifyDrop != null){
my_dd.notifyDrop(this, e, {data_to_pass_through : 'foobar'});
}
}
Although you might want to change the name of your 'notifyDrop' method, as I think that Ext uses that in some way...Code:notifyDrop : function(source, event, data){
// Handle event from here
}