Question

我正在尝试找到一种方法，允许用户在拖动项目时使用滚轮滚动div（使用jQuery Draggable），同时能够直观地查看他们拖动的项目离开该可滚动div的边界。

我尝试了很多事情，从在可拖动对象中设置各种选项到尝试一些有关拖动和滚动问题的建议，但没有任何效果。不知道以目前的形式，我正在尝试实现什么。目前有;

var type = "normal";
var maxWeight = 500;
var secondMaxWeight = 500;

$(document).ready(function () {
    for(i = 1; i < (maxWeight / 10); i++) {
        $("#playerInventory").append($('#playerInventory').find('.slot:last-child').clone());
        $('#playerInventory').find('.slot:last-child').data("slot", i);
    }

    for(i = 1; i < (secondMaxWeight / 10); i++) {
        $("#otherInventory").append($('#otherInventory').find('.slot:last-child').clone());
        $('#otherInventory').find('.slot:last-child').data("slot", i);
    }

    $('.slot').draggable({
        scroll: true,
        helper: 'clone',
        containment: '.ui',
        appendTo: '.inventory',
        revert: 'invalid',
        zIndex: 99999,
        cancel: ".empty-item"
    });


    $('#playerInventory .slot').droppable({
        drop: function (event, ui) {
            if($(this).data('slot') !== undefined) {
                console.log('valid drop');
            }
        }
    });

    $('#otherInventory .slot').droppable({
        drop: function (event, ui) {
            if($(this).data('slot') !== undefined) {
                console.log('valid drop');
            }
        }
    });
});

例如：https://jsfiddle.net/Lgwo3qun/

我要实现的所有其他功能都很不错。但是事实证明，滚动是一个令人头疼的事情。

如果我直接将其附加到特定的广告资源div，它会很好用，并且效果完全符合我的期望。问题是，一旦您将div拖出该目录作为附加清单，您将无法看到它，因为溢出-x设置为隐藏。

$('.slot').draggable({
    scroll: false,
    helper: 'clone',
    containment: '.ui',
    appendTo: '#playerInventory',
    revert: 'invalid',
    zIndex: 99999,
    cancel: ".empty-item"
});

例如：https://jsfiddle.net/80mxcuw7/1/

在Scroll Div外部可见的jQuery Draggable滚动子元素/毒品元素

0 个答案: