Build the matching option for jQuery UI Droppable's Intersect tolerance

后端 未结 2 1877
无人共我
无人共我 2021-01-15 00:54

I want to drag an element into TWO OR MORE droppable areas, but those droppable areas need to be wholly contained within my draggable object.

The problem is, none of

2条回答
  •  没有蜡笔的小新
    2021-01-15 01:46

    How to make a jQuery UI’s Droppable accept a Draggable when it’s top left corner gets inside? I created jquery.ui.droppable-patch.js for jQuery UI Droppable 1.9.2

    (function ($, undefined) {
    $.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;
        var l = droppable.offset.left, r = l + droppable.proportions.width,
            t = droppable.offset.top, b = t + droppable.proportions.height;
        switch (toleranceMode) {
            case 'fit':
                return (l <= x1 && x2 <= r
                && t <= y1 && y2 <= b);
                break;
            case 'intersect':
                return (l < x1 + (draggable.helperProportions.width / 2) // Right Half
                && x2 - (draggable.helperProportions.width / 2) < r // Left Half
                && t < y1 + (draggable.helperProportions.height / 2) // Bottom Half
                && y2 - (draggable.helperProportions.height / 2) < b ); // Top Half
                break;
            case 'pointer':
                var draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left),
                    draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top),
                    isOver = $.ui.isOver(draggableTop, draggableLeft, t, l, droppable.proportions.height, droppable.proportions.width);
                return isOver;
                break;
            case 'touch':
                return (
                        (y1 >= t && y1 <= b) || // Top edge touching
                        (y2 >= t && y2 <= b) || // Bottom edge touching
                        (y1 < t && y2 > b)      // Surrounded vertically
                    ) && (
                        (x1 >= l && x1 <= r) || // Left edge touching
                        (x2 >= l && x2 <= r) || // Right edge touching
                        (x1 < l && x2 > r)      // Surrounded horizontally
                    );
                break;
    
            case "top-left-touch":
                return ( y1 >= t && y1 <= b ) && ( x1 >= l && x1 <= r );
            case "top-right-touch":
                return ( y1 >= t && y1 <= b ) && ( x2 >= l && x2 <= r );
            case "bottom-left-touch":
                return ( y2 >= t && y2 <= b ) && ( x1 >= l && x1 <= r );
            case "bottom-right-touch":
                return ( y2 >= t && y2 <= b ) && ( x2 >= l && x2 <= r );
            default:
                return false;
                break;
        }
    };
    

    }(jQuery));

提交回复
热议问题