Question

我已经在如下所示的可放置容器中实现了滚动，因为可放置容器没有滚动条。

var maxTop = $('#drop_wrapper').height()+$('#drop_wrapper').offset().top;
var minTop = $('#drop_wrapper').offset().top;
var initialTop = $('#drop_wrapper').find('.dropps').first().offset().top;       
var scrollHeight = $('#drop_wrapper').find('.dropps').first().outerHeight();
var containerHeight = $('#drop_wrapper').outerHeight()
var firstLeft = $('#drop_wrapper').find('.dropps').first();
var lastLeft = $('#drop_wrapper').find('.dropps').last();

$('.draggs').draggable({
    addClasses: false,
    containment: 'main-container',
    delay: 250,
    revert: "invalid",
    revertDuration: 0,
    zIndex: 200,
    helper: "clone",
    scroll: false,
    cursor : 'move',        
    drag: function(event, ui){          
        if(ui.offset.top > maxTop && lastLeft.offset().top > containerHeight){                  
            document.querySelector('#drop_wrapper').scrollBy(0, scrollHeight);
    }else if(ui.offset.top < minTop && firstLeft.offset().top < initialTop ){
        document.querySelector('#drop_wrapper').scrollBy(0, -1 * scrollHeight);
    }
    }       
});

滚动条在Chrome中可以正常运行。当我们在可放置容器下方或上方拖动时，将发生滚动。通过在可放置的“ over”事件中添加一个类来突出显示可放置的容器，并在“ out”事件中将其删除。在正常情况下，即无需滚动即可拖放，效果很好。如果发生滚动，则“ this”对象的in and out事件不会给出实际的可放置节点，而是给出滚动之前位于相应位置的节点。在所有情况下，放置事件都会正确地赋予“ this”对象。

有人可以帮忙吗？

我已在下面的代码笔中添加了示例。我已经在droppable的over和drop事件中打印了“ this”。一旦滚动，问题就会发生。

sample-code

jQuery droppable：结束事件中错误的drop元素

0 个答案: