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
765 stars 96 forks source link

How to find out where the dragged item has ended #102

Closed WillyWilson1 closed 2 years ago

WillyWilson1 commented 2 years ago

Hi,

Not an issue, per se, but I'm trying to do some checking on where an item has been dragged to. Using onDragEnd I have this, which only gives me an object (in bold):

window.addEventListener('load', function() { let eLLs = document.getElementsByClassName('pdg'); let tOT = 0; while (tOT<eLLs.length) { draggable = new PlainDraggable(eLLs[tOT]);
draggable.onDragEnd = function(clientY) { console.log('Where is this? '+clientY); } // Where is this? [object Object] tOT++; } });

How do I access the relevant properties of left and top of the object?

Regards,

Philip Bolt

anseki commented 2 years ago

Hi @WillyWilson1, thank you for the comment. Replace this line:

draggable.onDragEnd = function(clientY) { console.log('Where is this? '+clientY); }

with:

draggable.onDragEnd = function(clientY) { console.log('Where is this? left:', clientY.left, 'top:', clientY.top); }
WillyWilson1 commented 2 years ago

Hi anseki,

Thanks for the quick reply - exactly what I wanted.

Having got these values, I find that there is more I need from the item - from defining a containment div, (as i need to have a number of instances of draggable sets on a single page) to getting the innerHTML which the dragged item carries, and which is needed for checking/comparison processes.

I realise that you have a living to earn and that asking you to answer a number of points here is not ideal. I'll spend some more time trying to figure out the code framework and then maybe I could come back to you with specific queries and we could agree a price for the relevant guidance?

PB/WW

anseki commented 2 years ago

Sorry, my English is poor. Do you mean that you want to get each index number of the draggable instances?

WillyWilson1 commented 2 years ago

Hi Anseki,

Thanks for another quick reply.

Yes, that is exactly what I mean - below is an example

This is what I have on the screen

image

The draggable divs are below in yellow, and I want to move them over the same word above in white/blue, and when I do I get this in the console - your code

image

That is exactly right, but I further need to access the innerHTML of the dragged item to check where it has ended its drag. This is what the 2 moved elements look like

This <div id="move_14_OvSBg" class="pdg plain-draggable" style="position: absolute; left: 42.74px; top: 125px; width: 26.4px; height: 15px; border: 0px solid yellow; background: yellow; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; text-align: center; will-change: transform; -webkit-tap-highlight-color: transparent; box-shadow: transparent 0px 0px 1px; cursor: grab; user-select: none; transform: translate(-22px, -104px);"> This <div id="stat~16~OvSBg" class="im-div-HH" style="position:absolute; left:42.74px; top:125px; width:26.40px; height:15px;">This~0~OvSBg~26.40~20~20~10~10~30~30~FREE~125~42.74~25~100</div></div>

fullstop <div id="move_5_OvSBg" class="pdg plain-draggable" style="position: absolute; left: 130.18px; top: 100px; width: 9.32px; height: 15px; border: 0px solid yellow; background: yellow; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; text-align: center; will-change: transform; -webkit-tap-highlight-color: transparent; box-shadow: transparent 0px 0px 1px; cursor: grab; user-select: none; transform: translate(13px, -54px);"> . <div id="stat~16~OvSBg" class="im-div-HH" style="position:absolute; left:130.18px; top:100px; width:9.32px; height:15px;">.~16~OvSBg~9.32~141.87~45~131.87~35~151.87~55~FREE~100~130.18~25~100</div></div>

I need to access this dragged item through the div id, for example, move_14_OvSBg and then get the innerHTML - which is another div which has top and left values of the correct dropped area.

Finally, as you can see, the console.log values for top reference the top of the page, not the containing div (blue border), which is why I need to know how to define that div through its id in the code.

I hope this is clear - your English looks fine to me.

Any advice much appreciated.

PB/WW

anseki commented 2 years ago

To get each index number, replace the line with:

const index = tOT;
draggable.onDragEnd = function(clientY) { console.log('Where is this? left:', clientY.left, 'top:', clientY.top, 'index:', index); }

You can get the element and its innerHTML by this:

draggable.onDragEnd = function() { console.log(this.element.innerHTML); }
WillyWilson1 commented 2 years ago

Hi Anseki,

Thanks for another quick reply.

Yes, that is exactly what I mean - below is an example

This is what I have on the screen

image

The draggable divs are below in yellow, and I want to move them over the same word above in white/blue, and when I do I get this in the console - your code

image

That is exactly right, but I further need to access the innerHTML of the dragged item to check where it has ended its drag. This is what the 2 moved elements look like

This <div id="move_14_OvSBg" class="pdg plain-draggable" style="position: absolute; left: 42.74px; top: 125px; width: 26.4px; height: 15px; border: 0px solid yellow; background: yellow; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; text-align: center; will-change: transform; -webkit-tap-highlight-color: transparent; box-shadow: transparent 0px 0px 1px; cursor: grab; user-select: none; transform: translate(-22px, -104px);"> This <div id="stat~16~OvSBg" class="im-div-HH" style="position:absolute; left:42.74px; top:125px; width:26.40px; height:15px;">This~0~OvSBg~26.40~20~20~10~10~30~30~FREE~125~42.74~25~100</div></div>

fullstop <div id="move_5_OvSBg" class="pdg plain-draggable" style="position: absolute; left: 130.18px; top: 100px; width: 9.32px; height: 15px; border: 0px solid yellow; background: yellow; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; text-align: center; will-change: transform; -webkit-tap-highlight-color: transparent; box-shadow: transparent 0px 0px 1px; cursor: grab; user-select: none; transform: translate(13px, -54px);"> . <div id="stat~16~OvSBg" class="im-div-HH" style="position:absolute; left:130.18px; top:100px; width:9.32px; height:15px;">.~16~OvSBg~9.32~141.87~45~131.87~35~151.87~55~FREE~100~130.18~25~100</div></div>

I need to access this dragged item through the div id, for example, move_14_OvSBg and then get the innerHTML - which is another div which has top and left values of the correct dropped area.

Finally, as you can see, the console.log values for top reference the top of the page, not the containing div (blue border), which is why I need to know how to define that div through its id in the code.

I hope this is clear - your English looks fine to me.

Any advice much appreciated.

PB/WW

WillyWilson1 commented 2 years ago

Hi Anseki,

That's great! All the values I need are now accessible.

The last thing is how to define and access a div as the containment area so that I can use that top to check against the dragged item's top. I have a div with an id and all the styling, but currently am using the default containment area - which is the top of the page, I think.

As before, any advice/example would be appreciated.

I think we must be in different time zones.

PB/WW

anseki commented 2 years ago

Maybe you mistook this duplicated comment (https://github.com/anseki/plain-draggable/issues/102#issuecomment-968062257).

You can access the containment option via containment property:

draggable.onDragEnd = function() { console.log(this.containment); }
WillyWilson1 commented 2 years ago

Hi Anseki,

Yes, I did. Your code now gets me the right containment item

<div id="aTRYTHIS2Z" style="position: relative; display:block; width:338px; height: 530px; top:10px; left:10px; padding:5px; border: 1px solid blue; border-radius: 5px; margin-top: 5px;">

so how do I get the top and left values here - both 10px?

PB/WW

anseki commented 2 years ago

You can access to CSSStyleDeclaration via HTMLElement.style property.

draggable.onDragEnd = function() {
  this.containment.style.left = '10px'; // SET
  this.containment.style.top = '20px'; // SET
  console.log('left:', this.containment.style.left, 'top:', this.containment.style.top); // GET
}
WillyWilson1 commented 2 years ago

Hi Anseki,

Yes, that's exactly it - I get confused between element and this.

Many thanks for the code and your patience.

PB/WW

anseki commented 2 years ago

I'm glad if I could help you. :smile: The this refers to the current PlainDraggable instance. See document for details. https://anseki.github.io/plain-draggable/ The document includes description about the this, element, left, top, containment, and more.