Ok...I am still having the same issues with drag and drop. Please see the code below. If I try to drag an item in data view...It always places that item in the last position. It is very important that I get this fixed ASAP. Please see my attachment above if you still don't understand what I am talking about.
<script type="text/javascript">
Ext.ux.YReorderer = Ext.extend(Object, {
defaults: {
animate: true,
animationDuration: 0.2,
defaultReorderable: true
},
constructor: function (config) {
Ext.apply(this, config || {}, this.defaults);
},
init: function (target) {
this.target = target;
this.initEvents();
var items = this.getItems(),
length = items.length,
i;
for (i = 0; i < length; i++) {
this.createIfReorderable(items[i]);
}
},
reorder: function (mappings) {
var target = this.target;
if (target.fireEvent('before-reorder', mappings, target, this) !== false) {
this.doReorder(mappings);
target.fireEvent('reorder', mappings, target, this);
}
},
doReorder: function (paramName) {
throw new Error("doReorder must be implemented in the Ext.ux.YReorderer subclass");
},
createItemDD: function (item) {
throw new Error("createItemDD must be implemented in the Ext.ux.YReorderer subclass");
},
createItemDD: function (button) {
var el = button.getEl(),
id = el.id,
tbar = this.target,
me = this;
button.dd = new Ext.dd.DD(el, undefined, {
isTarget: false
});
button.dd.constrainTo(tbar.getEl());
button.dd.setXConstraint(0, 0, 0);
Ext.apply(button.dd, {
b4StartDrag: function () {
this.startPosition = el.getXY();
this.startZIndex = el.getStyle('zIndex');
el.setStyle('zIndex', 10000);
button.suspendEvents();
},
onDrag: function (e) {
var buttonY = el.getXY()[1],
deltaY = buttonY - this.startPosition[1],
items = tbar.items.items,
oldIndex = items.indexOf(button),
newIndex;
for (var index = 0; index < items.length; index++) {
var item = items[index];
if (item.reorderable && item.id != button.id) {
var box = item.getEl().getBox(),
midpoint = (me.buttonYCache[item.id] || box.y) + (box.height / 2),
movedUp = oldIndex > index && deltaY < 0 && buttonY < midpoint,
movedBottom = oldIndex < index && deltaY > 0 && (buttonY + el.getHeight()) > midpoint;
if (movedUp || movedBottom) {
me[movedUp ? 'onMovedUp' : 'onMovedBottom'](button, index, oldIndex);
break;
}
}
}
},
endDrag: function () {
me.updateButtonYCache();
el.moveTo(me.buttonYCache[button.id], undefined, {
duration: me.animationDuration,
scope: this,
callback: function () {
button.resumeEvents();
tbar.fireEvent('reordered', button, tbar);
}
});
el.setStyle('zIndex', this.startZIndex);
}
});
},
createIfReorderable: function (item) {
if (this.defaultReorderable && item.reorderable == undefined) {
item.reorderable = true;
}
if (item.reorderable && !item.dd) {
if (item.rendered) {
this.createItemDD(item);
} else {
item.on('render', this.createItemDD.createDelegate(this, [item]), this, { single: true });
}
}
},
getItems: function () {
return this.target.items.items;
},
initEvents: function () {
this.target.addEvents(
'before-reorder',
'reorder'
);
}
});
Ext.ux.VBoxReorderer = Ext.extend(Ext.ux.YReorderer, {
init: function (container) {
this.buttonYCache = {};
container.on({
scope: this,
add: function (container, item) {
this.createIfReorderable(item);
}
});
Ext.ux.VBoxReorderer.superclass.init.apply(this, arguments);
},
createItemDD: function (button) {
if (button.dd != undefined) {
return;
}
var el = button.getEl(),
id = el.id,
me = this,
tbar = me.target;
button.dd = new Ext.dd.DD(el, undefined, {
isTarget: false
});
el.applyStyles({
// position: 'absolute'
});
var menuDisabler = function () {
return false;
};
Ext.apply(button.dd, {
b4StartDrag: function () {
this.startPosition = el.getXY();
this.startZIndex = el.getStyle('zIndex');
el.setStyle('zIndex', 10000);
button.suspendEvents();
if (button.menu) {
button.menu.on('beforeshow', menuDisabler, me);
}
},
startDrag: function () {
this.constrainTo(tbar.getEl());
this.setXConstraint(0, 0, 0);
},
onDrag: function (e) {
var buttonY = el.getXY()[1],
deltaY = buttonY - this.startPosition[1],
items = tbar.items.items,
length = items.length,
oldIndex = items.indexOf(button),
newIndex, index, item;
for (index = 0; index < length; index++) {
item = items[index];
if (item.reorderable && item.id != button.id) {
var box = item.getEl().getBox(),
midpoint = (me.buttonYCache[item.id] || box.y) + (box.height / 2),
movedUp = oldIndex > index && deltaY < 0 && buttonY < midpoint,
movedBottom = oldIndex < index && deltaY > 0 && (buttonY + el.getHeight()) > midpoint;
if (movedUp || movedBottom) {
me[movedUp ? 'onMovedUp' : 'onMovedBottom'](button, index, oldIndex);
break;
}
}
}
},
endDrag: function () {
me.updateButtonYCache();
el.moveTo(el.getX(), me.buttonYCache[button.id], {
duration: me.animationDuration,
scope: this,
callback: function () {
button.resumeEvents();
if (button.menu) {
button.menu.un('beforeshow', menuDisabler, me);
}
tbar.fireEvent('reordered', button, tbar);
}
});
el.setStyle('zIndex', this.startZIndex);
}
});
},
onMovedUp: function (item, newIndex, oldIndex) {
var tbar = this.target,
items = tbar.items.items,
length = items.length,
index;
if (newIndex != undefined && newIndex != oldIndex) {
tbar.remove(item, false);
tbar.insert(newIndex, item);
this.updateButtonYCache();
for (index = 0; index < length; index++) {
var obj = items[index],
newY = this.buttonYCache[obj.id];
if (item == obj) {
item.dd.startPosition[1] = newY;
} else {
var el = obj.getEl();
el.moveTo(el.getX(), newY, {
duration: this.animationDuration
});
}
}
}
},
onMovedBottom: function (item, newIndex, oldIndex) {
this.onMovedUp.apply(this, arguments);
},
updateButtonYCache: function () {
var tbar = this.target,
items = tbar.items,
totalY = tbar.getEl().getBox(true).y;
items.each(function (item) {
this.buttonYCache[item.id] = totalY;
totalY += item.getEl().getHeight();
}, this);
}
});
</script>
Originally Posted by Daniil
