Javascript Drag and drop for touch devices

Question

I am looking for a drag  amp  DROP plugin that works on touch devices   I would like similar functionality to the jQuery UI plugin which allows  droppable  elements   The jqtouch plugin supports dragging  but no dropping   Here is drag  amp  drop that only supports iPhone iPad   Can anyone point me in the direction of a drag  amp  drop plugin that works on android ios       Or it might be possible to update the jqtouch plugin for droppability  it already runs on Andriod and IOS   Thanks

User · Answer

I had the same solution as gregpress answer  but my draggable items used a class instead of an id  It seems to work   var  target     event target     if   target hasClass  draggable             event preventDefault

User · Answer

You can use the Jquery UI for drag and drop with an additional library that translates mouse events into touch which is what you need  the library I recommend is https   github com furf jquery-ui-touch-punch  with this your drag and drop from Jquery UI should work on touch devises   or you can use this code which I am using  it also converts mouse events into touch and it works like magic    function touchHandler event        var touch   event changedTouches 0        var simulatedEvent   document createEvent  MouseEvent            simulatedEvent initMouseEvent           touchstart   mousedown           touchmove   mousemove           touchend   mouseup        event type   true  true  window  1          touch screenX  touch screenY          touch clientX  touch clientY  false          false  false  false  0  null        touch target dispatchEvent simulatedEvent       event preventDefault       function init         document addEventListener  touchstart   touchHandler  true       document addEventListener  touchmove   touchHandler  true       document addEventListener  touchend   touchHandler  true       document addEventListener  touchcancel   touchHandler  true       And in your document ready just call the init   function   code found from Here

User · Answer

Thanks for the above codes  - I tried several options and this was the ticket  I had problems in that preventDefault was preventing scrolling on the ipad - I am now testing for draggable items and it works great so far   if  event target id     draggable item          event preventDefault

User · Answer

For anyone looking to use this and keep the  click  functionality  as John Landheer mentions in his comment   you can do it with just a couple of modifications   Add a couple of globals    var clickms   100  var lastTouchDown   -1    Then modify the switch statement from the original to this   var d   new Date    switch event type        case  touchstart   type    mousedown   lastTouchDown   d getTime    break      case  touchmove   type  mousemove   lastTouchDown   -1  break              case  touchend   if lastTouchDown  gt  -1  amp  amp   d getTime   - lastTouchDown   lt  clickms  lastTouchDown   -1  type  click   break   type  mouseup   break      default  return      You may want to adjust  clickms  to your tastes  Basically it s just watching for a  touchstart  followed quickly by a  touchend  to simulate a click

User · Answer

Old thread I know         Problem with the answer of  ryuutatsuo is that it blocks also any input or other element that has to react on  clicks   for example inputs   so i wrote this solution  This solution made it possible to use any existing drag and drop library that is based upon mousedown  mousemove and mouseup events on any touch device  or cumputer   This is also a cross-browser solution   I have tested in on several devices and it works fast  in combination with the drag and drop feature of ThreeDubMedia  see also http   threedubmedia com code event drag    It is a jQuery solution so you can use it only with jQuery libs  I have used jQuery 1 5 1 for it because some newer functions don t work properly with IE9 and above  not tested with newer versions of jQuery    Before you add any drag or drop operation to an event you have to call this function first   simulateTouchEvents  lt object gt      You can also block all components children for input or to speed up event handling by using the following syntax   simulateTouchEvents  lt object gt   true      ignore events on childs   Here is the code i wrote  I used some nice tricks to speed up evaluating things  see code    function simulateTouchEvents oo bIgnoreChilds     if     oo  0        return false      if   window   touchTypes         window   touchTypes     touchstart  mousedown  touchmove  mousemove  touchend  mouseup       window   touchInputs    INPUT 1 TEXTAREA 1 SELECT 1 OPTION 1  input  1  textarea  1  select  1  option  1         oo  bind  touchstart touchmove touchend   function ev        var bSame    ev target    this       if  bIgnoreChilds  amp  amp   bSame          return         var b     bSame  amp  amp  ev target   ajqmeclk      Get if object is already tested or input type         e   ev originalEvent      if  b     true     e touches    e touches length  gt  1     window   touchTypes e type            return      allow multi-touch gestures to work      var oEv      bSame  amp  amp  typeof b     boolean     ev target  data  events   false          b     bSame   ev target   ajqmeclk   oEv  oEv  click      oEv  mousedown      oEv  mouseup      oEv  mousemove    false   false       if  b    window   touchInputs ev target tagName           return      allow default clicks to work  and on inputs          https   developer mozilla org en DOM event initMouseEvent for API     var touch   e changedTouches 0   newEvent   document createEvent  MouseEvent        newEvent initMouseEvent window   touchTypes e type   true  true  window  1              touch screenX  touch screenY              touch clientX  touch clientY  false              false  false  false  0  null        touch target dispatchEvent newEvent       e preventDefault        ev stopImmediatePropagation        ev stopPropagation        ev preventDefault         return true        What it does  At first  it translates single touch events into mouse events  It checks if an event is caused by an element on in the element that must be dragged around  If it is an input element like input  textarea etc  it skips the translation  or if a standard mouse event is attached to it it will also skip a translation    Result  Every element on a draggable element is still working     Happy coding  greetz  Erwin Haantjes

[javascript] Javascript Drag and drop for touch devices

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to touch