How to get the target element value when dragable Leader snapped true

[rruichava]

Hi @anseki, Thanks for providing plain-draggable it's really good and I have small doubt see this link https://jsfiddle.net/Ramrao/jyoau3v5/5/ I have two input boxes when ever snapped how to snapped target input value. Can you please help me.

[anseki]

Hi @rruichava, thank you for the comment. Sorry, could you explain more? What does “how to snapped target input value” mean? Do you mean that you want to get whether the draggable element was snapped or not?

[rruichava]

Thanks @anseki , I got solution from your document

[anseki]

:smile:

[xeroxstar]

Hi @rruichava, thank you for the comment. Sorry, could you explain more? What does “how to snapped target input value” mean? Do you mean that you want to get whether the draggable element was snapped or not?

I cant find anything in docs how to get the target that was snapped.... Could you point me where in docs it's explained? By the way, you should have some source code examples.

[anseki]

Hi @xeroxstar, thank you for the comment. You can get that via snapped property that is passed to some event listeners. See document: https://anseki.github.io/plain-draggable/#options-ondrag You should see example codes in the document.

[xeroxstar]

Hi @xeroxstar, thank you for the comment. You can get that via snapped property that is passed to some event listeners. See document: https://anseki.github.io/plain-draggable/#options-ondrag You should see example codes in the document.

Thanks for a quick reply,

What do you mean "You can get that via snapped property that is passed to some event listeners."? The snappedproperty return Boolean value only not the target. Here is an example:

draggable.onDrag = function(newPosition) {
   console.log(newPosition);
};

the newPosition returns only 3 properties without the target(Dom element):

{
  left: 229
  snapped: true
  top: 111
}

As I understand, we can provide an array of targets but when the dragging is done, how do I know which target has been snapped? The 'Boolean' value doesn't help me here so much, I need to know what target was snapped so I can manipulate it.

Appreciate your help.

[anseki]

Sorry, what does the "target" mean? Do you mean that you want to get the element as a draggable element that you passed to the constructor? If so, you can access to that via element property. See document: https://anseki.github.io/plain-draggable/#element

[xeroxstar]

Hi @rruichava, thank you for the comment. Sorry, could you explain more? What does “how to snapped target input value” mean? Do you mean that you want to get whether the draggable element was snapped or not?

I cant find anything in docs how to get the target that was snapped.... Could you point me where in docs it's explained? By the way, you should have some source code examples.

I finally could figured out how to get the snapped target:

draggable.snap = {
    targets : Array.from( document.querySelectorAll('[worksapce]'))
}
draggable.onDrag = function() {
        let target = draggable.snap.targets.filter(target => {
             let rect = target .boundingBox.getBoundingClientRect();
             if(e.detail.position.left === rect.left || e.detail.position.top === rect.top )
                    return x;
        })[0];

        if(target)
            console.log(target);
} 

[anseki]

For example: https://jsfiddle.net/v9Lpm7zq/

[anseki]

Umm... Does the "target" mean the "snap target"? Is it not the element as a draggable element that you passed to the constructor? If so, that is not supported.

[anseki]

You can get that by coordinates of each snap target. The library doesn't support it.

[xeroxstar]

You can get that by coordinates of each snap target. The library doesn't support it.

Yes, the snapped target what I was looking for but as I understand you don't support it. Anyway, I really love this library and great job! Thanks for your help!

[anseki]

:smile: You can get that easily via SnapTarget property of SnapOptions (e.g. boundingBox) that is accessed via snap property of instance.

[xeroxstar]

😄 You can get that easily via SnapTarget property of SnapOptions (e.g. boundingBox) that is accessed via snap property of instance.

Not sure what do you mean, what i needed is to get the target where the draggable object was dropped and i solved it, here is the finale code that worked for me 👍

draggable.onDrag = function(position) {
    if (position.snapped) {
        let target = this.snap.targets.filter(x => {
            let rect = x.boundingBox.getBoundingClientRect();
            if (position.left >= rect.left && position.left <= rect.left + x.boundingBox.offsetWidth && position.top >= rect.top && position.top <= rect.top + x.boundingBox.offsetHeight)
                return x;
        })[0];

        if (target) {
            dispatchObject.detail.target = target;
            row._row.data.origin.dispatchEvent(new CustomEvent('snapped', dispatchObject));
        }
    }
}

[anseki]

Yes, it seems that your code contains some strange lines. Anyway, good for the solution. :smile:

[anseki]

FYI; As I said, your code contains otiose process (e.g. filter method), strange behavior (e.g. return x), some bugs (e.g. different coordinates origin, then that should be broken when window was scrolled), etc. You can fix those for making your code work faster and correctly, and it is simple and smaller. For example: https://jsfiddle.net/qkhbg4Lr/ Note that this is not best.

[xeroxstar]

FYI; As I said, your code contains otiose process (e.g. filter method), strange behavior (e.g. return x), some bugs (e.g. different coordinates origin, then that should be broken when window was scrolled), etc. You can fix those for making your code work faster and correctly, and it is simple and smaller. For example: https://jsfiddle.net/qkhbg4Lr/ Note that this is not best.

This is what i was looking for, thank you so much :)

[anseki]

:smile: