Drag and Drop (how to do the drop and drag-over behaviors)

[John Garrett]

I'm a novice to HTML5 and I'd welcome any background information on understanding how the drag-over behavior is supposed to work in Snap.svg. I've learned how to drag complex SVG images that I've drawn in Adobe Illustrator. See the dragging code below (I hope it is of use). Next, I'm trying to detect when my dragged SVG is placed correctly over another loaded SVG image, which I assume would require a behavior in the the dragging event listener and in the stopDrag event listener.  I have no clue of how to detect what my dragged object is passing over. Any help or references or corrections are welcome.

 

Thanks,

 

Snap.load("../svg/productimage.svg", function (f) { //load a highly detailed, realistic-looking SVG that was created in Adobe Illustrator
  g = f.select("g");
  s.append(g);
  
  g.transform('t40, 140'); //transform to place the product image (this is the only way I can find to change the x and y coordinates of a complex, imported SVG)
  g.cx = 40; //attach the image's known coordinates where the drag event handlers can find them (this was easier than trying to parse the transform string)
  g.cy= 140;
  g.ox = 0; //coordinates used to hold the difference between my product image and the point that the mouse clicks it
  g.oy = 0;
  
  g.drag( dragging, startDrag,
   function () {

 //I thought a drop or drag over behavior would go here, but I don't know how to detect a drop-over or drop event

   }); 
   

 });

 

startDrag = function(posx, posy){ //drag start handler assigned to all product images
   this.ox =  posx - this.cx; //capture the offset between the mouse's coordinates and store it with the object
   this.oy = posy - this.cy;
   
 }
 
 dragging = function(dx, dy, posx, posy){ //dragging handler
  this.cx =  posx - this.ox; //subtract offset from mouse position to keep dragged object tracking with the mouse
   this.cy = posy - this.oy;
   t = 't' + this.cx + ',' + this.cy; //build and apply a transform
   this.transform(t);
 }

[anthony doherty]

I've got same question, can't understand the drag.over event usage. 

Looking at the source code it doesn't appear to be implemented yet, commented out I think.

[spl...@gmail.com]

Same here!

I'd love to see how to trigger and use the drag.over event!

And as anthony said, it seems to be cmmented out! Would it be possible to at least enable the hover event while dragging?

[pascal]

I've the same problem. Anybody got a solution?

[Fransjo Leihitu]

I have a theory ..

in the docs I see

http://snapsvg.io/docs/#Snap.path.isBBoxIntersect

So you can compare 2 bboxes are intersecting

So while you're dragging,

1) get the bbox of the drag element
2) get the bbox of the element you want to test with
3) use the isBBoxIntersect() to check if they intersect

I haven't tested this

[John Garrett]

Thank you, Fransjo. Your suggestion works. I've modified my startDrag and dragging functions as follows:

startDrag = function(posx, posy){

  this.ox =  posx - this.cx;

  this.oy = posy - this.cy;

  dropTarget = iou.s.select("g[id=braindrop]"); //get the svg node that is the object I will drag "this" to.
  dropTargetBBox = this.getBBox(dropTarget); //get the bounding box object
 }

dragging = function(dx, dy, posx, posy){

  this.cx =  posx - this.ox; 

  this.cy = posy - this.oy;
  t = 't' + this.cx + ',' + this.cy;

  this.transform(t);
  
  brainBox = this.getBBox(); //get the bounding box object for "this", which is the svg artwork that I'm draggin
  var intersect = Snap.path.isBBoxIntersect(brainBox, iou.dropTargetBBox); //test for an overlap of the svg artwork and drop target

  if (intersect == true){
   dropTarget.select('path').attr({stroke: "#f00", strokeWidth: 3});//show a highlight
   
  } else {
   dropTarget.select('path').attr({stroke: "#f2f2f2", strokeWidth: 1});//remove a highligh
  }
  
 }

[John Garrett]

In my previous example, please ignore the "iou." that is part of the text "iou.dropTargetBBox". My variables are attached to an iou objects and I meant to strip this out of this example.

[Mark Leavesley]

I know this is an old post but I wondered if anybody has found a better way to do this? 

It seems very inefficient to query an intersect with every other object.