andycamp00

Ah, that's a much better strategy - I like it. Thanks for the help.

On Chrome, when a touchevent occurs, the pageX/Y values are set to 0. This means that hitTest won't work when passing in the touch events... I'm not sure if this is something easy to handle inside Draggable, but I thought I would post it to see if anyone has any thoughts, and if not at least let others know and show my workaround. For now I am doing a workaround to make my own point to pass in to Draggable.hitTest(), like so: // e is my event var point = e; if(e.pageX === 0 && e.pageY === 0 && e.changedTouches) { x = e.changedTouches[0].pageX; y = e.changedTouches[0].pageY; point = { left: x, right: x+1, top: y, top: y+1 }; } var hit = Draggable.hitTest(element, point); This is a related investigation to a thread I started at http://greensock.com/forums/topic/12189-draggablehittest-in-a-scrolled-window/, but seemed like a separate topic, so I started a new thread.

Ah, of course... that works. Thanks! I'll mark the original link from to the fix as solved.

so my current workaround code modifies blakes slightly: var x, y; if (e.changedTouches) { x = e.changedTouches[0].clientX; y = e.changedTouches[0].clientY; } else { x = e.clientX; y = e.clientY; } var point = { left: x, right: x + 1, top: y, bottom: y + 1 }; var hit = Draggable.hitTest(element, point); This works on iOS at least, for a normal touch-drag scenario. I need to learn more about changedTouches prop to find out if it is universal and if using the first element in the array is always OK...

For blake: No problems, but for touch events, the events store data differently - and I can see several examples of this in the Draggable code with comments like: if (e.changedTouches) { //touch events store the data slightly differently The event object from a touch doesn't have a clientX or clientY prop, but they have a changedTouches property that is an array of points with clientX (and, on iOS at least, also a touches property that is an array of points..) Anyway, I'll look through Draggable and see how it works, it seems to be using changedTouches all the time. Not too bad; I wasn't looking forward to figuring out all the compatibility issues for different touch platforms... but it doesn't look too bad.

Thanks Greensock, that version doesn't seem to solve the problem, although I did a diff and there were no differences in the parseRect() or hitTest() functions between the version 1.14.1 you linked and version 1.14.0 (of my current draggable file) that I am using. There were some changes from self to this, and some changes in the _cache function. Edit: I updated my codepen at http://codepen.io/acamp/pen/zGbLBp to point the latest-beta link above.

Thanks Blake. I was just finding my way to this, that's a sweet codepen Demo . Thanks for the tip on using clientX/Y, that does seem to solve my problem... (although getting clientX/Y on touch events is my next complication). I'm curious why hitTest uses PageX/Y for pointer events... it appears that for DOM elements it uses getBoundingClientRect(), which is a clientX/Y based result. So it would make sense to use clientX/Y for everything when doing hit tests...

Thanks Rodrigo - thanks for the reply. My example is a bit contrived. I agree that if I compare the 2 boxes with the non static version, things work well, but for my actual application I'm looking to do a hittest with the pointer event - the dragging example was a convenient way to show this. But the hitTest docs (http://greensock.com/docs/#/HTML5/Drag/Draggable/hitTest/) state that a pointer event is a supported object...

While doing hit test while the window is scrolled, I don't seem to get the correct results. This occurs if I am trying to compare the pointer event of the mouse. The code pen example demonstrates it: the top 2 boxes will work correctly, but if you scroll the demo window down and try with the bottom 2 boxes the hittest will still return false. My initial thought is that this has something to do with some confusion or misuse somewhere between clientx/pagex, but I'm just beginning to investigate. Any ideas or pointers?

Thanks, I like that idea, your codepen was great and will help!

Is there a good way to replicate jquery's helper feature? (http://api.jqueryui.com/draggable/#option-helper) quick summary: this is a feature where the element being shown while dragging is different that what is originally clicked on. The general feature is that I want to drag an element from one div to div, but until it is dropped, leave it shown in the original div and spot where it started, and once dropped, perform logic to determine whether it is removed the original div or left there. (plus, while dragging add a class that will style the element in a different way.) I'm thinking of trying two ways, but wanted to know if there were other good ways. 1: when dragging starts, clone the object and put it in the dom in the original spot. Not ideal, don't want to manipulate the DOM like that, and will also need to handle all the cases where I need to clean up. 2. - when dragging starts, clone the element and then stop dragging on the initial element and start dragging on the new clone. Not sure if this will work, I haven't used the startDrag and endDrag functions yet. Just wanted to know if I'm missing something before I get started.