Drag and Drop does not allow you to move the item up or left

[randy4126]

You cannot move an item an item up or left because the coordinates of the item where it is placed is 0,0 and to go up or left will cause the coordinates to negetive, the red lines of code below sets it back to 0 in Ext.dd.DD class:

alignElWithMouse: function(el, iPageX, iPageY) {
        var oCoord = this.getTargetCoord(iPageX, iPageY),
            fly = el.dom ? el : Ext.fly(el, '_dd'),
            elSize = fly.getSize(),
            EL = Ext.core.Element,
            vpSize;

        if (!this.deltaSetXY) {
            vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
            var aCoord = [
               Math.max(0, Math.min(oCoord.x, vpSize.width - elSize.width)),
                Math.max(0, Math.min(oCoord.y, vpSize.height - elSize.height))
            ];
            fly.setXY(aCoord);
            var newLeft = fly.getLeft(true);
            var newTop  = fly.getTop(true);
            this.deltaSetXY = [newLeft - oCoord.x, newTop - oCoord.y];
        } else {
            vpSize = this.cachedViewportSize;
            fly.setLeftTop(
                Math.max(0, Math.min(oCoord.x + this.deltaSetXY[0], vpSize.width - elSize.width)),
                Math.max(0, Math.min(oCoord.y + this.deltaSetXY[1], vpSize.height - elSize.height))
            );
        }

        this.cachePosition(oCoord.x, oCoord.y);
        this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
        return oCoord;
    }

Removing the Math.max calls fix this issue and allows the item to be moved anywhere on the page, like in previous versions of ExtJs. Is this a bug or an intentional change in 4.0? If intentional, it would be nice to have an easy way to re-configure (not overriding the whole method).

An example drag and drop implemntation that works with Ext 3.3 but breaks when including Ext 4.0 instead: http://perevodik.net/en/posts/21/

[joshua.ball@osi.com]

If the above snippet for the alignElWithMouse function doesn't work for you, you can try this:

alignElWithMouse: function(el, iPageX, iPageY) {
                     var oCoord = this.getTargetCoord(iPageX, iPageY),
                         fly = el.dom ? el : Ext.fly(el, '_dd'),
                         EL = Ext.core.Element,
                         vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() },
                         aCoord = [
                             Math.max(0, Math.min(oCoord.x, vpSize.width)),
                             Math.max(0, Math.min(oCoord.y, vpSize.height))
                         ];
                         
                     fly.setXY(aCoord);
                     this.cachePosition(oCoord.x, oCoord.y);
                     this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
                     return oCoord;
                 }

This allowed me to always have the drag elements follow the mouse cursor. Just as an FYI, all of my drag elements are panels laid out inside of a parent container (the drop target) with column layout.