0

I need to make a div draggable via jquery through a mask div. First the div structure:

<div id="parent">//Relatively positioned
   <div id="mask"></div>
   <div id="content"></div>
</div>

I need to make the #content div draggable, but since it is layered under the mask div, mouse-events don't reach it. So my perfect solution for desktop:

$("#mask").on("mousedown",function(e){
     $("#content").trigger(e);
})

As you can see, I simply pass on the necessary event data, and it all works good. But I don't know what to do for a touch device. Which event do I send through?

I am using jQueryMobile and TouchPunch .....and without the mask div, it works properly on touch screens. Any ideas?

Bluemagica
  • 5,000
  • 12
  • 47
  • 73
  • 1
    I would start with the `touchstart` and `touchmove` events and see if that works on iOS (not sure how these will work with TouchPunch). If that works, you'll then need to deal with with Microsoft's superior-but-obscure pointer event abstractions, such as [`MSPointerDown`](http://msdn.microsoft.com/en-us/library/windows/apps/hh465891.aspx) – Tim M. Apr 20 '13 at 22:23
  • Well, without the mask div, the draggable() works fine alogside TouchPunch, so I am pretty sure there is already an abstraction event in place... – Bluemagica Apr 20 '13 at 22:25
  • FYI, when I said "abstraction event", I was referring to Microsoft, which has abstracted everything to a "pointer event" (mouse, touch, stylus, etc) – Tim M. Apr 20 '13 at 22:30
  • Check this http://stackoverflow.com/questions/15343385/change-position-of-divs-with-jquery-drag-an-drop – Omar Apr 20 '13 at 22:39
  • I already tried that, along with vmousedown, touchstart, touchmove and anything else I could think of – Bluemagica Apr 20 '13 at 22:48

0 Answers0