JQuery SVG makes objects inaccessible

Question

I am trying to create a web application for booking seats using SVG. Imagine, I created rectangles in svg, which is an empty space. I want to allow the user to drop the html element "image" to "rect" in order to reserve space.

However, I could not get droppable to work on SVM elements. Anyone have an idea why this is so? Here is the code:

$('#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

If anyone has the same question, droppable does not work in jQuery SVG. So at the end, I did the following to create my own droppable event:

• In drag and drop mode, set the target that is being dragged, dragged to draggedObj,

• In the mouse up event, check if draggedObj is null, if it is not null, then discard the element according to the current position. (let me know if you need help finding your current position)

Answer 2

I looked into the jQuery-ui source and realized why it does not work with SVG. jQuery believes that they have a width and height of 0px, so the intersection test fails.

I wrapped $ .ui.intersect and set the correct size information before passing the arguments to the original function. There may be more proportion objects that need fixing, but the two I made here are enough to fix mine:

 $.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 3

With jQuery UI 1.11.4, I had to change Eddie's solution to the following, since draggable.proportions is now a function:

 $.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 4

If you want to limit the fall of svg elements to visible content (for example, in polygons ), you might want to use this add-on to Peter Bauman's suggestion:

 $.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(); px = x; py = y; p = p.matrixTransform(dropTarget.getScreenCTM().inverse()); if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p))) intersect = false; } } return intersect; };