Jquery ui jQueryUI拖动时自动滚动

我有三个列表，一个可以拖动，另两个可以拖放。右侧列表可能有滚动条，也可能没有滚动条，但始终有2个或更多滚动条

我发现的第一个问题是，当最上面的列表有一个滚动条，而您试图在第二个列表中删除一个项目时，会触发两个事件。一个用于隐藏列表，一个用于可见列表

---

第二个问题是，当其中一个列表具有滚动条时，当用户将项目拖动到其中时，它不会自动滚动。

我认为您需要修改可拖放的

并以这种方式修改一些行为：


您需要添加一个选项来定义是否应该使用
可拖放的
是否可滚动
然后，您将需要某种验证，以确定哪个
droppable
是否可见
您还需要调整一些应用程序中已经存在的滚动行为
jQueryUI的
widgets


这并不完美，但应该给你一些想法：

 $.widget('ui.droppable', $.ui.droppable, {

        _over: function (e, ui) {
            var draggable = $.ui.ddmanager.current;
            if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element

            // this to make sure the droppable is visible
            this.scrollVisible = this._isScrollIntoView();

            if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {

                if (this.options.hoverClass) {
                    this.element.addClass(this.options.hoverClass);
                }
                // to activate scrollable you need to change scrollParent of the draggable
                // and adjust some calculations
                if (this.options.scrollable) {
                    draggable.overflowOffset = $(this.element).scrollParent().offset();
                    draggable.scrollParent = $(this.element).scrollParent();
                    draggable.offsetParent = $(this.element).scrollParent();
                    draggable.offset.parent.top = $(this.element).scrollParent().scrollTop();
                }
                this._trigger('over', event, this.ui(draggable));
            }


        },
        _out: function (event) {

            this._super();
            var draggable = $.ui.ddmanager.current;

            // remove scrollable 
            if (this.options.scrollable) {
                draggable.scrollParent = $(document);
                draggable.offsetParent = $(document);
                draggable.overflowOffset = $(document).offset();
                draggable.offset.parent.top = $(document).scrollTop();
            }
        },
        _drop: function (event, custom) {

            var draggable = custom || $.ui.ddmanager.current;
            if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return false; // Bail if draggable and droppable are same element

            var childrenIntersection = false;
            this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function () {
                var inst = $.data(this, 'droppable');
                if (
                inst.options.greedy && !inst.options.disabled && inst.options.scope == draggable.options.scope && inst.accept.call(inst.element[0], (draggable.currentItem || draggable.element)) && $.ui.intersect(draggable, $.extend(inst, {
                    offset: inst.element.offset()
                }), inst.options.tolerance)) {
                    childrenIntersection = true;
                    return false;
                }
            });
            if (childrenIntersection) return false;

            // same as for over, you need to validate visibility of the element
            this.scrollVisible = this._isScrollIntoView();

            if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {
                if (this.options.activeClass) this.element.removeClass(this.options.activeClass);
                if (this.options.hoverClass) this.element.removeClass(this.options.hoverClass);
                this._trigger('drop', event, this.ui(draggable));
                return this.element;
            }

            return false;

        },
        // a function to check visibility. Taken here:
        //http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
        _isScrollIntoView() {

            var $elem = $(this.element);
            var $parent = $(this.element).scrollParent();

            var docViewTop = $parent.parent().scrollTop();
            var docViewBottom = docViewTop + $parent.parent().height();

            var elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }
    });



    $(document).ready(function () {
        $(".left ul li").draggable({
            refreshPosition: true,
            revert: true,

        });

        $(".right .top li").droppable({
            scrollable: true,

            drop: function (e, ui) {
                alert(ui.draggable.text() + " " + $(this).text());
            }
        });
        $(".right .bottom li").droppable({
            scrollable: false,

            drop: function (e, ui) {
                alert(ui.draggable.text() + " " + $(this).text());
            }
        });

    });

$.widget（'ui.droppable'，$.ui.droppable{
_结束：功能（e、ui）{
var draggable=$.ui.ddmanager.current；
如果（！draggable | | |（draggable.currentItem | | draggable.element）[0]==this.element[0]）返回；//如果draggable和dropable是同一个元素
//这是为了确保可拖放文件可见
this.scrollVisible=this.\u iscrollintoView（）；
if（this.accept.call（this.element[0]，（draggable.currentItem | | | | draggable.element））&&（！this.options.scrollable | | this.scrollVisible））{
if（this.options.hoverClass）{
this.element.addClass（this.options.hoverClass）；
}
//要激活scrollable，您需要更改DragTable的ScrollabParent
//并调整一些计算
if（this.options.scrollable）{
draggable.overflowOffset=$（this.element.scrollParent（）.offset（）；
DragTable.scrollParent=$（this.element）.scrollParent（）；
DragTable.offsetParent=$（this.element）.scrollParent（）；
draggable.offset.parent.top=$（this.element）.scrollParent（）.scrollTop（）；
}
this._触发器（'over'，事件，this.ui（可拖动））；
}
},
_输出：功能（事件）{
这个；
var draggable=$.ui.ddmanager.current；
//删除可滚动的
if（this.options.scrollable）{
draggable.scrollParent=$（文档）；
draggable.offsetParent=$（文档）；
draggable.overflowOffset=$（document.offset（）；
draggable.offset.parent.top=$（document.scrollTop（）；
}
},
_drop：函数（事件、自定义）{
var draggable=custom | |$.ui.ddmanager.current；
如果（！draggable | | |（draggable.currentItem | | draggable.element）[0]==this.element[0]）返回false；//如果draggable和dropable是同一个元素，则返回Bail
var childrenIntersection=false；
this.element.find（“：data（droppable）”）.not（“.ui可拖动”）.each（函数（）{
var inst=$.data（这是“可拖放的”）；
如果(
inst.options.greedy&&！inst.options.disabled&&inst.options.scope==draggable.options.scope&&inst.accept.call（inst.element[0]，（draggable.currentItem | | draggable.element））&&&$.ui.intersect（draggable，$.extend（inst{
偏移量：inst.element.offset（）
})，安装选项（公差））{
childrencrossion=true；
返回false；
}
});
if（childrencrossion）返回false；
//与上相同，您需要验证元素的可见性
this.scrollVisible=this.\u iscrollintoView（）；
if（this.accept.call（this.element[0]，（draggable.currentItem | | | | draggable.element））&&（！this.options.scrollable | | this.scrollVisible））{
if（this.options.activeClass）this.element.removeClass（this.options.activeClass）；
if（this.options.hoverClass）this.element.removeClass（this.options.hoverClass）；
this._触发器（'drop'，event，this.ui（可拖动））；
返回此.element；
}
返回false；
},
//用于检查可见性的函数。在此处获取：
//http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
_IsCrollintoView（）{
var$elem=$（this.element）；
var$parent=$（this.element）.scrollParent（）；
var docViewTop=$parent.parent（）.scrollTop（）；
var docViewBottom=docViewTop+$parent.parent（）.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
返回（（elemBottom=docViewTop））；
}
});
$（文档）.ready（函数（）{
$（“.left ul li”）。可拖动({
立场:对,，
回复：对，
});
$（“.right.top li”）。可拖放({
可滚动：对，
drop：函数（e、ui）{
警报（ui.draggable.text（）+“”+$（this.text（））；
}
});
$（“.right.bottom li”）。可拖放({
可滚动：false，
drop：函数（e、ui）{
警报（ui.draggable.text（）+“”+$（this.text（））；
}
});
});

这肯定会让我接近。谢谢你的帮助。
 $.widget('ui.droppable', $.ui.droppable, {

        _over: function (e, ui) {
            var draggable = $.ui.ddmanager.current;
            if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element

            // this to make sure the droppable is visible
            this.scrollVisible = this._isScrollIntoView();

            if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {

                if (this.options.hoverClass) {
                    this.element.addClass(this.options.hoverClass);
                }
                // to activate scrollable you need to change scrollParent of the draggable
                // and adjust some calculations
                if (this.options.scrollable) {
                    draggable.overflowOffset = $(this.element).scrollParent().offset();
                    draggable.scrollParent = $(this.element).scrollParent();
                    draggable.offsetParent = $(this.element).scrollParent();
                    draggable.offset.parent.top = $(this.element).scrollParent().scrollTop();
                }
                this._trigger('over', event, this.ui(draggable));
            }


        },
        _out: function (event) {

            this._super();
            var draggable = $.ui.ddmanager.current;

            // remove scrollable 
            if (this.options.scrollable) {
                draggable.scrollParent = $(document);
                draggable.offsetParent = $(document);
                draggable.overflowOffset = $(document).offset();
                draggable.offset.parent.top = $(document).scrollTop();
            }
        },
        _drop: function (event, custom) {

            var draggable = custom || $.ui.ddmanager.current;
            if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return false; // Bail if draggable and droppable are same element

            var childrenIntersection = false;
            this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function () {
                var inst = $.data(this, 'droppable');
                if (
                inst.options.greedy && !inst.options.disabled && inst.options.scope == draggable.options.scope && inst.accept.call(inst.element[0], (draggable.currentItem || draggable.element)) && $.ui.intersect(draggable, $.extend(inst, {
                    offset: inst.element.offset()
                }), inst.options.tolerance)) {
                    childrenIntersection = true;
                    return false;
                }
            });
            if (childrenIntersection) return false;

            // same as for over, you need to validate visibility of the element
            this.scrollVisible = this._isScrollIntoView();

            if (this.accept.call(this.element[0], (draggable.currentItem || draggable.element)) && (!this.options.scrollable || this.scrollVisible)) {
                if (this.options.activeClass) this.element.removeClass(this.options.activeClass);
                if (this.options.hoverClass) this.element.removeClass(this.options.hoverClass);
                this._trigger('drop', event, this.ui(draggable));
                return this.element;
            }

            return false;

        },
        // a function to check visibility. Taken here:
        //http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
        _isScrollIntoView() {

            var $elem = $(this.element);
            var $parent = $(this.element).scrollParent();

            var docViewTop = $parent.parent().scrollTop();
            var docViewBottom = docViewTop + $parent.parent().height();

            var elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }
    });



    $(document).ready(function () {
        $(".left ul li").draggable({
            refreshPosition: true,
            revert: true,

        });

        $(".right .top li").droppable({
            scrollable: true,

            drop: function (e, ui) {
                alert(ui.draggable.text() + " " + $(this).text());
            }
        });
        $(".right .bottom li").droppable({
            scrollable: false,

            drop: function (e, ui) {
                alert(ui.draggable.text() + " " + $(this).text());
            }
        });

    });