JQuery SVG使對象可以放置

Question

我正在嘗試使用SVG構建座位預訂網絡應用程序。 想象一下，我在svg中創建了一個矩形，代表一個空位。 我想允許用戶在“rect”上放一個html“image”元素來保留座位。

但是，我無法使用droppable來處理SVG elemnet。 任何人都知道為什么會這樣？ 這是代碼：

$('#target').svg();
var svg = $("#target").svg('get');
svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" });
$('rect')
        .droppable({
           accept: '.product',
           tolerance: 'touch',
           drop: function (event, ui) {
              alert('df');
           }
        }

Answer 1

我查看了jQuery-ui源代碼並找出了為什么它不能與SVG一起工作。 jQuery認為它們的寬度和高度為0px，因此交叉測試失敗。

在將參數傳遞給原始函數之前，我包裝了$ .ui.intersect並設置了正確的大小信息。 可能有更多比例的對象需要修復，但我在這里做的兩個足以修復我：

$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function(draggable, droppable, toleranceMode) {
    //Fix helper
    if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
        draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
        draggable.helperProportions = draggable.helperProportionsBBox;
    }

    //Fix droppable
    if (droppable.proportions && droppable.proportions.width === 0 && droppable.proportions.height === 0) {
        droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
        droppable.proportions = droppable.proportionsBBox;
    }

    return $.ui.intersect_o(draggable, droppable, toleranceMode);
};

Answer 2

使用jQuery UI 1.11.4我不得不將Eddie的解決方案更改為以下內容，因為draggable.proportions現在是一個函數：

$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
   draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
   draggable.helperProportions = draggable.helperProportionsBBox;
}

if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
   if (typeof $(droppable.element).get(0).getBBox === "function") {
       droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
       droppable.proportions = function () {
           return droppable.proportionsBBox;
       };
   }

    return $.ui.intersect_o(draggable, droppable, toleranceMode, event);
};

Answer 3

如果你想限制 svg元素的下降僅限於可見內容 （例如在多邊形中 ），你可能想要使用Peter Baumann的建議：

$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
    //Fix helper
    if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
        draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
        draggable.helperProportions = draggable.helperProportionsBBox;
    }

    if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
        if (typeof $(droppable.element).get(0).getBBox === "function") {
            droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
            droppable.proportions = function () {
                return droppable.proportionsBBox;
            };
        }

    var intersect = $.ui.intersect_o(draggable, droppable, toleranceMode, event);
    if (intersect) {
        var dropTarget = $(droppable.element).get(0);
        if (dropTarget.ownerSVGElement && (typeof (dropTarget.isPointInFill) === 'function') && (typeof (dropTarget.isPointInStroke) === 'function')) {
            var x = ( draggable.positionAbs || draggable.position.absolute ).left + draggable.margins.left + draggable.helperProportions.width / 2,
                y = ( draggable.positionAbs || draggable.position.absolute ).top + draggable.margins.top  + draggable.helperProportions.height / 2,
                p = dropTarget.ownerSVGElement.createSVGPoint();
            p.x = x;
            p.y = y;
            p = p.matrixTransform(dropTarget.getScreenCTM().inverse());
            if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p)))
                intersect = false;
        }
    }
    return intersect;
};

Answer 4

如果任何人有同樣的問題，droppable在jquery SVG中不起作用。 所以最后，我做了以下創建我自己的droppable事件：

1. 在draggable中，將當前拖動的目標設置為draggedObj，

2. 在mouse up事件中，檢查draggedObj是否為null，如果它不為null，則根據當前位置刪除該項。 （如果您在檢測當前位置時需要幫助，請告訴我）