Thanks for your reply. I worked out something similar without modifing
the MochiKit code.
here the steps:
- for every element on my list (happends in _append)
* add a onmousedown event, in this event
- clone element
- add clone to body
- remove original
- adjust clone position
- register as draggable
- remember elements-id
- reset was_dropped marker
- fire initDrag() on new draggable
- for every droppable register a ondesactive function (in my example
this.onDragEnd), this will be called on each drop for ALL droppables,
that's why there is a was_dropped marker
Because i removed the dragged element i have to add it back either if
its droped or canceled. So there two methods:
- _append: here is the work (see above)
- _appendFromDraggable: recreating a simple list element from a
draggable, cleaning up and calling _append (mentioned above)
I believe this is very simple solution without hacking MochiKit. It
would be create if you could give me some feedback.
Take a look (simplified):
<div id="dnd1" style="height: 120px; overflow: auto">
<ul id="dnd1List">
</ul>
</div>
now the script:
_WAS_DROPPED = false;
DragNDropZone = function(element, options) {
var cls = arguments.callee;
if (!(this instanceof cls)) {
return new cls(element, options);
}
MochiKit.Base.bindMethods(this);
this.__init__(element, options);
};
DragNDropZone.prototype = {
__init__: function(element, options) {
var b = MochiKit.Base;
var d = MochiKit.DOM;
this.element = element;
this.container = d.getElement(element);
this.list = d.getElement(element+"List");
this.options = b.update({
accept: []
}, options || {});
this.draggableOptions = {'ghosting': false,
revert: true,
'selectclass': 'dndDragedObject',};
this.dropZoneOptions = {'ondrop': this.onDrop,
'accept': this.options.accept,
'ondesactive': this.onDragEnd,};
// simple marker
this._lastDragged = null;
/* here i have ajax to load a initial list, here some pseude
code /*
var one = this._newItem("1");
one.data = "One";
this._append(one);
// and so on ...
},
onDragEnd: function(dropzone /*is this*/, draggable) {
// successfull drop?
if (DragNDropZone_WAS_DROPPED) return;
// was my draggable?
if (!this._lastDragged) return;
if (this._lastDragged == draggable.id) {
// reinsert as not draggable
this._appendFromDraggable(draggable);
this._lastDragged = null;
}
},
onDrop: function (elem, dropElt /* is "this.container"!! */) {
MochiExtended.highlightSuccess(this.container);
this._appendFromDraggable(elem);
// avoid double inserts, because this.onDragEnd() will
// be called later
DragNDropZone_WAS_DROPPED = true;
},
_newItem: function(id) {
return LI({'id': id, 'class': "dndElement
"+this.element+"-item"});
},
_append: function(child) {
this.list.appendChild(child);
var self = this;
MochiKit.Signal.connect(child, "onmousedown", function(event) {
var d = MochiKit.DOM;
var s = MochiKit.Style;
var clone = child.cloneNode(true);
var childPos = s.getElementPosition(child);
var childDim = s.getElementDimensions(child);
d.removeElement(child);
MochiKit.Signal.disconnectAll(child);
d.appendChildNodes(d.currentDocument().body, clone);
var clonePos = s.getElementPosition(clone);
clonePos.x = childPos.x - clonePos.x;
clonePos.y = childPos.y - clonePos.y;
s.setElementPosition(clone, clonePos);
s.setElementDimensions(clone, childDim);
var draggable = new MochiKit.DragAndDrop.Draggable(clone,
self.draggableOptions);
self._lastDragged = clone.id;
_WAS_DROPPED = false;
draggable.initDrag(event);
// set css-classes on all participants
// is fired on first move, this is to late for me
draggable.updateDrag(event, event.mouse());
});
},
_appendFromDraggable: function (elem) {
newChild = this._newItem(elem.id);
forEach(elem.childNodes, function(node) {
newChild.appendChild(node.cloneNode(true));
});
MochiKit.DragAndDrop.Draggables.unregister(elem);
MochiKit.DOM.removeElement(elem);
MochiKit.Signal.disconnectAll(elem);
this._append(newChild);
},
};
By sasten
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
