PDA

View Full Version : Need help with drag and drop



harley.333
11 May 2010, 12:02 AM
I've got a span filled with divs. I want to be able to re-order the divs. As I move an item up or down, I want the sibling item to "jump" into the vacant spot. The following code achieves this goal, but for some reason the item that I'm moving "jumps" further and further away from the mouse cursor. Any ideas?

var root = new Ext.Element("div_Test");
var itemSelector = ".answer";

var overrides = {
// Called the instance the element is dragged.
b4StartDrag: function() {
// Cache the drag element
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
this.originalZ = this.el.getStyle("z-index");
invertColors(this.el);
this.el.setStyle("z-index", 100000);
this.el.setOpacity(.75);
},

// Called when element is dropped on anything other than a dropzone with the same ddgroup
onInvalidDrop: function() {
// Set a flag to invoke the animated repair
this.invalidDrop = true;
},

// Called when the drag operation completes
endDrag: function() {
invertColors(this.el);
this.el.setStyle("z-index", this.originalZ);
this.el.setOpacity(1);
// Invoke the animation if the invalidDrop flag is set to true
if (this.invalidDrop === true) {
// Remove the drop invitation

// Create the animation configuration object
var animCfgObj = {
easing: "elasticOut",
duration: 1,
scope: this,
callback: function() {
// Remove the position attribute
this.el.dom.style.position = "";
}
};

// Apply the repair animation
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
},

onDrag: function(evtObj) {
var source = this.el;
var top = evtObj.getPageY(); //source.getY();
var bottom = evtObj.getPageY(); //source.getHeight() + top;
var moveTo = null;
var prev = source.prev();
while (prev != null) {
if (bottom <= (prev.getY() + prev.getHeight())) {
moveTo = prev;
}
prev = prev.prev();
}
if (moveTo != null) {
moveTo.insertAfter(source);
return;
}
var next = source.next(); // moving down
while (next != null) {
if (next.getY() <= top) {
moveTo = next;
}
next = next.next();
}
if (moveTo != null) {
moveTo.insertBefore(source);
return;
}
},

onDragDrop: function(evtObj, targetElId) {
/*
// Wrap the drop target element with Ext.Element
var dropEl = Ext.get(targetElId);

// Move the element
dropEl.appendChild(this.el);

// Remove the drag invitation
this.onDragOut(evtObj, targetElId);
*/
// Clear the styles
this.el.dom.style.position = "";
this.el.dom.style.top = "";
this.el.dom.style.left = "";
}
};
// Configure the answers to be draggable
var answers = Ext.get("div_Test").select(".answer");
Ext.each(answers.elements, function(el) {
var dd = new Ext.dd.DD(el, "answersDDGroup", {
});
//Apply the overrides object to the newly created instance of DD
Ext.apply(dd, overrides);
dd.setXConstraint(0, 0);
});

//Instantiate instances of Ext.dd.DDTarget for the answers container
var answersDDTarget = new Ext.dd.DDTarget("div_Test", "answersDDGroup");

13 May 2010, 3:59 AM
can you post the HTML so i can try to reproduce this as quickly as possible?

harley.333
18 May 2010, 7:02 AM
Hey Jay,

Thanks for the offer. I eventually gave up and used jQuery (not my favorite decision). The list was a basic <UL><LI....</UL>.