2

我正在使用 jQuery UI 进行拖放，一切都很好，我唯一的问题是，当我滚动时，我试图拖动一个元素并将其放在滚动区域中，该元素被还原回到原来的位置。

澄清一下，默认情况下，当您将其拖出左侧部分时，它不会立即滚动，只有在您放下它一次之后，您才能选择该元素并向左或向下滚动。

我在jsfiddle上发布了一个示例，演示了我的问题。

$("#sidebar section span").draggable({
    cursor: "move",

    helper: "clone",

    revert: "invalid",

    //containment: "html",

    scroll: true
});

$("#main section").droppable({
    tolerance: 'fit',

    accept: "#sidebar section span",

    drop: function(e, ui)
    {
        console.log("Drop");

        var $draggedElement = ui.draggable;
        var $droppedArea = $(this);

        var droppedAreaLeft = $droppedArea.offset().left;
        var droppedAreaTop = $droppedArea.offset().top;

        $droppedArea.parent().css("overflow", "auto");

        var $draggableElement = $draggedElement.clone();

        $draggableElement.draggable({
            containment: [droppedAreaLeft, droppedAreaTop],

            scroll: true,

            scrollSpeed: 10,

            scrollSensitivity: 10
        });

        $droppedArea.append($draggableElement);

        $draggableElement.offset(ui.offset);
    },
});
4

1 回答 1

2

我通过覆盖默认函数解决了这个问题，并为支持滚动的容差添加了一个新状态。

这是代码。

var _intersect = jQuery.ui.intersect;

jQuery.ui.intersect = function(draggable, droppable, toleranceMode) {

    if (!droppable.offset) {
        return false;
    }

    var x1 = (draggable.positionAbs || draggable.position.absolute).left, x2 = x1 + draggable.helperProportions.width,
        y1 = (draggable.positionAbs || draggable.position.absolute).top, y2 = y1 + draggable.helperProportions.height,
        l = droppable.offset.left, r = l + droppable.proportions.width,
        t = droppable.offset.top, b = t + droppable.proportions.height;

    switch (toleranceMode) {
        case "scroll":  
            var overflowBottom = droppable.element.scrollParent().scrollTop();
            var overflowRight = droppable.element.scrollParent().scrollLeft();;

            x1 = x1 - overflowRight;
            y1 = y1 - overflowBottom;
            x2 = x2 - overflowRight;
            y2 = y2 - overflowBottom;

            return (l <= x1 && x2 <= r && t <= y1 && y2 <= b);
        default:
            return _intersect.apply(this, arguments);
        }
};
于 2013-04-30T05:30:22.770 回答