search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
773 stars 99 forks source link

Getting the element a snappable element snapped to #26

Closed AidanDaniel97 closed 5 years ago

AidanDaniel97 commented 5 years ago

Awesome library but I seem to have encountered a bit of a flaw for my use case.

I am currently trying to do a multiple choice drag and drop - so I need to be able to see what options the user has dropped where.

Essentially I need to get the element where the user has dragged the answer to and snapped it to. is there a way I can get the element that i is snapped to?

anseki commented 5 years ago

Hi @AidanDaniel97, thank you for your comment.

You can get whether the element was snapped or not via snapped property of an object that was passed to event listeners. For example: https://anseki.github.io/plain-draggable/#options-ondrag In this example code, the element can move only when that is snapped.

AidanDaniel97 commented 5 years ago

Hi @anseki

Thanks for the response but I am looking to get a bit more information than that?

For example, I have three draggable elements and three snap points. Each of those elements can snap to any of the three snap points. Once the user drags one of these elements to ANY snap point

I want to be able to get the element that the draggable element was snapped to so I can target it and read it's properties?

I have attached an image to help illustrate what I am trying to do. So once that draggable element is dragged onto the second snap point, I would be able to get that element's id '#snapPlaceTwo' or get any other properties from it

untitled

anseki commented 5 years ago

Yes of course it is very easy. The object has left and top properties. https://anseki.github.io/plain-draggable/#options-ondrag

AidanDaniel97 commented 5 years ago

Yeah, but that is just giving the the left and top props where I would then need to check each element and if it has the same left and top properties and if it is then that's where it was dragged - but does it not return the actual dom element?

anseki commented 5 years ago

Sorry, I could not understand "actual dom element" that you said. Maybe you are mistaken. You might think that the draggable element snap to specific elements. The snap-target can be Point, Line, Element or Rect. See document: https://anseki.github.io/plain-draggable/#snap

Anyway, generally, coordinates are used for that, and it is very easy. For example: https://jsfiddle.net/qy4hntek/ You will see that a blue box become to green box.

AidanDaniel97 commented 5 years ago

I will give this a go - I just assumed as you could set a snap target to an element as you said it could be 'Point, Line, Element or Rect.', that you can get the element that is snapped to

thanks for the example

anseki commented 5 years ago

As the document says, an element and a Rect object only create four lines. That is, specifying an element is just a convenient way instead of lines. For details of SnapTarget: https://anseki.github.io/plain-draggable/#structure-and-abbreviation

Anyway, you can get the element very easily by checking X and Y as you said. And also, this has a better performance than handling DOM element.

So, could you close this issue if it was solved?