This project is archived and is in readonly mode.

#531 open
jmt_be

issue with droppables not visible due to scroll

Reported by jmt_be | March 1st, 2011 @ 05:42 PM

http://jsfiddle.net/jmt_be/976fz/

Just after running, try to drag item 2.2 before item 2.1, this is not going to work.

This is because the check on droppables is not validating that the droppable is indeed actually under the mouse. And when boxes overlap, it gets messed up.

I modified checkDroppables in Drag.Move to make it work. Check the code hereafter.

ATTENTION: it also requires the mouse clientX and clientY to be captured by Drag at the same time it captures pageX and pageY. I modified the code in Drag to capture it in this.mouse.clientnow

  checkDroppables: function(){
            var overed = this.droppables.filter(function(el, i){
            var droppable = el ; //jmt
            
            el = this.positions ? this.positions[i] : el.getCoordinates();
            var now = this.mouse.now;
            
            // jmt return (now.x > el.left && now.x < el.right && now.y < el.bottom && now.y > el.top);
            
            // jmt : need more here in order to filter out elements located in some overflow that is not
            //currently displayed (eg scrolled out of view)
            var thisisit = false;
            if (now.x > el.left && now.x < el.right && now.y < el.bottom && now.y > el.top) {
                // jmt: we have a candidate -> double check
                // hide drag - use elementfrompoint to check it - unhide drag
                // Need more tests with Safari 4 or Opera !!! check www.quirksmode.com for elementFromPoint
                var clientnow = this.mouse.clientnow ; // !!! needs capturing in Drag  at the same time we record this.mouse.now !!!
                this.element.setStyle('display',  'none');
                var receiver = document.elementFromPoint(clientnow.x,clientnow.y);
                if (receiver == droppable) { 
                    thisisit = true ;
                }
                else {
                    // jmt check if receiver has a parent matching the droppable
                    var receiverparents = receiver.getParents();
                    thisisit = receiverparents.contains(droppable);
                    
                }
                this.element.setStyle('display',  '');
            };
            return(thisisit) ;
        }, this).getLast();

        if (this.overed != overed){
            if (this.overed) this.fireEvent('leave', [this.element, this.overed]);
            if (overed) this.fireEvent('enter', [this.element, overed]);
            this.overed = overed;
        }
    },

Comments and changes to this ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

People watching this ticket

Pages