0

I have the following RaphaelJS based path

var myPath = ctx.path("M 15 15 l 240 0 l 60 215 l -300 -70 z");

In the following 'canvas'

var ctx = new Raphael(document.getElementById('myCanvasId'));
ctx.setViewBox(0,0,w,h,true);
ctx.setSize('100%', '100%');

Problem is, i cant get new attached elements to the canvas to fire the onDragOver event i put on myPath, which is simply:

myPath.onDragOver(function(e) { alert('fired'); });

And the element creation is done dynamically, so are the bind on the elements. They're stored within a variable, that can be accessed anywhere after it's defined.

The element is created by:

ctx.rect((positionBox.x2 - positionBox.x) / 2 + randomX, (positionBox.y2 - positionBox.y) / 2 + randomY, postitSize.x, postitSize.y)

And the drag is binded by

postIts[postItCount]['item'].drag(move, start, up);

And the drag handling event functions are

var start = function () {
  this.odx = 0;
  this.ody = 0;
  this.animate({"fill-opacity": 0.8}, 200);
},move = function (dx, dy) {
  this.translate(dx - this.odx, dy - this.ody);
  this.odx = dx;
  this.ody = dy;
},
up = function () {
  this.animate({"fill-opacity": 1}, 200);
  console.log('end', this.odx, this.ody);
};

Still when i drag the created element over the one i binded with onDragOver, nothing is fired, in any way.

Is there anything i'm missing?

Thanks in advance.

Jorge Ferrari
  • 152
  • 3
  • 11
  • See if this helps at all https://stackoverflow.com/questions/8903717/raphael-detect-overlapped-elements-when-drag-and-drop – Ian Jul 11 '17 at 12:02
  • @Ian problem is that this solution seens to work with rectangles and circles, but not with paths :/ at least as you can see in the post, i've implemented it and it doesnt fire anything when the created object is dragged over – Jorge Ferrari Jul 11 '17 at 12:09
  • Also, already tried the [link](https://wrf.ecse.rpi.edu//Research/Short_Notes/pnpoly.html) solution, it doesnt seen to work :/ – Jorge Ferrari Jul 11 '17 at 12:12
  • Actually I'm trying to remember, I don't think it can work with anything other than rect/circle. I've done something similar for Snap though, Raphaels sister library, as long as you are ok with just the bounding box of a path being used, and not an exact collision detection. An example here https://github.com/adobe-webplatform/Snap.svg/issues/285 See the jsfiddle in there, you may be able to convert to Raphael or use Snap instead. – Ian Jul 11 '17 at 16:11
  • I must be precise with the point where center of the dragged shape was dropped, my solution was to apply a theory i found on Google, the sum of the angles relative to the point and the vertices of the shape, must be 360 if it was dropped within the shape, since i have no overlap on the shapes it worked. The function i used to accomplish it was Raphael.angle and Raphael.deg, if it helps anyone. You must create an array of the vertices coordinates, calculate the angle of each with the point where the dragged item was dropped and then sum the angles, if they match 360, it was dropped inside. – Jorge Ferrari Jul 12 '17 at 13:10
  • If you only need one point and don't need edge checking, you could probably just use getElementFromPoint, removing the pointerEvents attribute when testing and then restoring, example at http://jsfiddle.net/ian_b/mejpp3ew/38/ with Snap. See checkUnder. There is extra code in that example as I made it work for transformed elements as well which made it a bit more complicated. – Ian Jul 13 '17 at 08:34

0 Answers0