javascript - How can I prevent dropping into an invisible part of a jquery sortable

Question

I've got a couple of jquery sortables inside containers that scroll vertically. When dragging between those containers items can be added to a sortable by dragging below the container. Consider the following html:

    <style>
        .constrainer {
            height: 160px;
            overflow-y: auto;
            width:280px;
            border: 1px solid orange;
        }
        .sortitem {
            border: 1px solid #807eba;
            width: 160px
            display:inline-block;
            padding: 10px;
            margin: 10px;
            background-color: white;
        }
    </style>

    <div class="constrainer" style="float:left">
        <ul class="sortme">
            <li class="sortitem">item 1</li>
            <li class="sortitem">item 2</li>
            <li class="sortitem">item 3</li>
            <li class="sortitem">item 4</li>
            <li class="sortitem">item 5</li>
            <li class="sortitem">item 6</li>
        </ul>
    </div>
    <div class="constrainer" style="float:right">
        <ul class="sortme">
            <li class="sortitem">item 1</li>
            <li class="sortitem">item 2</li>
            <li class="sortitem">item 3</li>
            <li class="sortitem">item 4</li>
            <li class="sortitem">item 5</li>
            <li class="sortitem">item 6</li>
        </ul>
    </div>

And the following script:

$('.sortme').sortable({connectWith: '.sortme'});

Note that you can easily drag an item from one of the lists to another list by hitting BELOW the list.

I'd like to prevent dragging to a list that is cut off. In my actual application there is a much more complicated DOM structure, so the actual solution needs to find the actual area of the sortable that is in-view and allow dropping only in that area. Same for re-ordering items in a single sortable.

Here is a jsfiddle of the code above: http://jsfiddle.net/PFSsJ/

Edit: Clarification

To be clear, I still want to drag items to the part of the list that is visible, just not the part of the list that is invisible. For even more fun, arrange the lists vertically such that jquery ui can't decide which one to drop it on and it flickers back and forth like this: http://jsfiddle.net/PFSsJ/1/

Answer 1

I spent about two weeks working on various solutions to this problem. The code below is working for me in the application I'm building. Note that it only deals with sortables that are stacked vertically and scroll vertically. It could probably be modified to deal with horizontal sortables but I haven't tried as it doesn't fit my use-case.

You use it just like a sortable, just $('.ulClass').boundedSortable();

(function($) {
$.widget("ui.boundedSortable", $.ui.sortable, {
    widgetEventPrefix: "sort",
    _init: function () {
        this.element.data("sortable", this.element.data("boundedSortable"));
        return $.ui.sortable.prototype._init.apply(this, arguments);
    },
    _create:function() {
        var ret = $.ui.sortable.prototype._create.apply(this, arguments);
        this.containerCache.sortable = this;
        return ret;
    },
    refreshPositions:function(fast){
        $.ui.sortable.prototype.refreshPositions.apply(this, arguments);
        _.each(this.items, function(item){
            var element = item.item[0];
            var offset = item.item.offset();
            var points = [[offset.left + 1, offset.top + 1],
                          [offset.left + (item.width / 2), offset.top + (item.height / 2)],
                          [offset.left + item.width - 1, offset.top + 1],
                          [offset.left + item.width - 1, offset.top + item.height - 1]];
            item.visible = _.any(points, function(point){
                var visibleElement = $.elementFromPoint(point[0], point[1]);
                if(element === visibleElement || (visibleElement && $.contains(element, visibleElement))){
                    return true;
                }
                return false;
            });
        }, this);

        _.each(this.containers, function(container){
            var parent = container.element;
            var cache = container.containerCache;
            while((parent = parent.parent()) && parent.length){
                parent = $(parent);
                var offset = parent.offset();
                var parentHeight = parent.height();
                if(cache.height > parentHeight){
                    cache.height = Math.round(parentHeight);
                }
                if(offset && cache.top < offset.top){
                    cache.top = offset.top;
                }
            }
        }, this);
        return this;
    },
    _intersectsWithPointer: function (item) {
        var ret = $.ui.sortable.prototype._intersectsWithPointer.apply(this, arguments);
        if(ret){
            if(!item.visible){
                return false;
            }
        }
        return ret;
    },
    _clear: function(){
        if(!(this.placeholder && this.placeholder[0].parentNode)){
            this.placeholder = [{parentNode:{removeChild:function(){}}}];
            this.placeholder.before = function(){};
        }
        return $.ui.sortable.prototype._clear.apply(this, arguments);
    },
    _contactContainers: function(event) {

        /** directly from jQuery source **/

        // get innermost container that intersects with item
        var innermostContainer = null, innermostIndex = null;


        for (var i = this.containers.length - 1; i >= 0; i--){

            // never consider a container that's located within the item itself
            if($.ui.contains(this.currentItem[0], this.containers[i].element[0])){
                continue;
            }
            if(this._intersectsWith(this.containers[i].containerCache)) {

                // if we've already found a container and it's more "inner" than this, then continue
                if(innermostContainer && $.ui.contains(this.containers[i].element[0], innermostContainer.element[0])){
                    continue;
                }
                innermostContainer = this.containers[i];
                innermostIndex = i;

            } else {
                // container doesn't intersect. trigger "out" event if necessary
                if(this.containers[i].containerCache.over) {
                    this.containers[i]._trigger("out", event, this._uiHash(this));
                    this.containers[i].containerCache.over = 0;
                }
            }

        }

        /** end direct copy from jQuery source*/

        if(!innermostContainer){
            if (this.placeholder) {
                if(this.placeholder[0].parentNode) {
                    this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
                }
            }
            this.currentContainer = null;
            return;
        }
        return $.ui.sortable.prototype._contactContainers.apply(this, arguments);
    }
});
})(jQuery);

(function ($){
    var check=false, isRelative=true;
    $.elementFromPoint = function(x,y)
    {
        var elemFromPtFunc = null;
        if(document.getElementFromPoint){
            elemFromPtFunc = _.bind(document.getElementFromPoint, document);
        }else if(document.elementFromPoint){
            elemFromPtFunc = _.bind(document.elementFromPoint, document);
        }

        if(!elemFromPtFunc) {
            console.error('no element from point?');
            return null;
        }
        var scrollTop = $(document).scrollTop();
        var scrollLeft = $(document).scrollLeft();
        return elemFromPtFunc(x - scrollLeft,y - scrollTop);
    };
})(jQuery);