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);
};