PDA

View Full Version : D&D Element Copying



jhilgeman
28 Jan 2008, 10:43 AM
I've gone through some of the drag-n-drop tutorials, so I have a basic idea of how it's all working. However, I'm running into some trouble with simply copying an element. Here's what I'm trying to do:

I have a toolbar with an icon on it. I want to click and start dragging the icon onto the rest of the page. While dragging, the original icon should stay put, and I'd like a new image to be used for the DDProxy. The dragged item will snap to intervals (10 pixel intervals) or to align itself to other elements in the document. On endDrag, I want the DDProxy item to be dropped exactly where it is, creating a new copy of that image icon.

I've tinkered with createChild to create the copy, but I have a gut feeling that I'm not doing this correctly, and that I should be using the "new" constructor with a call to "Ext.apply". Can anyone help me out a bit? Thank you!

- Jonathan

jhilgeman
28 Jan 2008, 1:18 PM
I just came across another thread in the ExtJS forums which helped out with the cloning / copying of an HTML element, and ended up adding this to my code:


Ext.override(Ext.Element, {
// Call the passed function on the current Element, and all its descendants
cascade: function(fn, scope, args) {
if(fn.apply(scope || this, args || [this]) !== false){
var cs = this.dom.childNodes;
for(var i = 0, len = cs.length; i < len; i++) {
Ext.get(cs[i]).cascade(fn, scope, args);
}
}
},

clone: function() {
var result = this.dom.cloneNode(true);
result.id = Ext.id();
result = Ext.get(result);
result.cascade(function(e){e.id = Ext.id();});
return result;
}
});

Then, on endDrag, I have:


var newEl = el.clone();
docBody.appendChild(newEl);

newEl.applyStyles({position:'absolute'});
newEl.setXY(dragEl.getXY());
newEl.setWidth(dragEl.getWidth());

newDDEl.dd = new Ext.dd.DDProxy(newEl.id);

However, that last line throws a JS error. Firebug's JS error log says that the element doesn't exist, even though I can reference it successfully in other ways (i.e. alert(newEl.id);). If I actually inspect the DOM via Firebug, I can see the images that have been created.

Any reason why attaching the DDProxy doesn't work for these newly-created items?

- Jonathan