繁体   English   中英

JQuery SVG使对象可以放置

JQuery SVG making objects droppable

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试使用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');
           }
        }
4 个回复

我查看了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);
};

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

如果你想限制 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;
};

如果任何人有同样的问题,droppable在jquery SVG中不起作用。 所以最后,我做了以下创建我自己的droppable事件:

  1. 在draggable中,将当前拖动的目标设置为draggedObj,

  2. 在mouse up事件中,检查draggedObj是否为null,如果它不为null,则根据当前位置删除该项。 (如果您在检测当前位置时需要帮助,请告诉我)

1 在jQuery中将SVG对象设为droppable

我的Web应用程序中有一个SVG行(路径)对象,而div是可拖动的。 我想将“draggable”div拖入svg对象。 为此,我必须使SVG行(路径)为droppable。 使用以下代码,我可以将html内容设置为draggable / droppable。 但请帮助如何使s ...

3 制作一个jQuery droppable接受来自使用connectWith的sortable的项目

我有一个可排序的列表,它使用connectWith来确保它只能在自己的列表类型中排序。 现在,我正在尝试在对项目进行排序时,在视口底部显示可放置的垃圾桶元素。 此元素位于列表的上下文之外,只删除放在其上的任何元素。 如果您熟悉,则所需功能与从Android手机桌面删除快捷方式相同。 ...

4 使jQuery UI可放置只接受一次可拖动

我已经看到这个问题上只有几个变种问了几个其他的地方,特别是在这里和这里 。 基本上,我有一个跳棋游戏板,棋盘上的每个方块都是可放置的,每个游戏都是可拖动的。 每个方块一次只能有一个,我试图根据广场上是否有一块来切换启用/禁用方法。 这是我到目前为止的链接: http : //jsb ...

5 jQuery Droppable的

以下是我的jquery代码,我可以通过jquery对象访问gallery-folder属性,但droppable无法正常工作 以下是我的HTML 这是小提琴http://jsfiddle.net/gV7da/4/ ...

6 可投放的jQuery

首先,我是法国人,如果我的英语不完美,很抱歉:/ 我想知道是否: $('#drop1').droppable({ accept: '#drag1', if (drop: function()) { $(this).css('background-color', 'green ...

7 jQuery ui-droppable内部的droppable

我在droppable内部使用droppable,但是子droppable无法正常工作。 我正在尝试做什么 我有一个父droppable #droppable 。 我的第一个父级droppable接受两个元素#child-drop1和#child-drop2 。 ...

10 jQuery svg,实现交互式对象

我有一个代码在我的svg文件中创建一个对象: 我想实现一个通过在其他元素中进行mouseover事件来删除该元素的功能。 我该怎么做? 谢谢! ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM