Reputation: 12512

JS library (with drag n drop) compatible with iOS and regular browsers

Does anyone know of a JS framework that has drag and drop functionality and is compatible with mobile (iOS) and regular browsers?

I currently have a web-based app and it is a hassle to make its drag'n'drop functionality work on iOS... I wish there was one that would do it for both...

Upvotes: 57

Answers (13)

taye

Reputation: 281

interact.js is a standalone and lightweight drag-and-drop, resize and multi-touch gesture javascript module. It works on iOS, Android, Chrome, Firefox, Opera and IE9+ with support for interacting with HTML and SVG elements. Something to note in advance is that it's up to the developer to respond to drag events but I think that's a good thing.

To allow the whole page to be panned by dragging, you could use:

// make an Interactable of the document body element
interact(document.body)
// make a draggable of the Interactable
  .draggable({
    // on(drag)move
    onmove: function (event) {
      x += event.dx;
      y += event.dy;

      // translate the document body by the change in pointer position
      document.body.style.translate = 'translate(' + x + 'px, ' + y + 'px)';
    }
  })

Upvotes: 4

defau1t

Reputation: 10619

You can use jquery UI for drag and drop and an additional library that maps touch events to their mouse event analogs.I think this should solve your problem:

https://github.com/yeco/jquery-ui-touch-punch

To add touch events, just include the jquery.ui.touch-punch.min.js script after your jquery.ui scripts.

DEMOS:

http://furf.com/exp/touch-punch/

Upvotes: 2

austincheney

Reputation: 1115

This is still in alpha: http://prettydiff.com/jsgui

It is persistent even after you close or refresh your browser and it will work in any modern browser. Furthermore it is not a framework. You can use this without other frameworks and you can customize it to do what you want.

Upvotes: 0

Elmer

Reputation: 9437

hi there i use this jquery plugin: https://github.com/LuvDaSun/jdrag

It provides some drag events

let me know if you find any bugs, the code is quite new!

Upvotes: 0

Nick Nizovtsev

Reputation: 373

zepto (smallest, iOS 4+, Android 2.2+, webOS 1.4.5+)
jquery, jquerymobile, jqtouch
prototype
sencha, senchatouch

Upvotes: 2

Tudor

Reputation: 4164

http://www.kendoui.com/ this should work. Has d'n'd too, even though it's still in Beta.

Upvotes: 3

Adilson de Almeida Jr

Reputation: 2755

If you are building web apps for ios you must try jquery mobile.

Upvotes: 0

Filip Radelic

Reputation: 26683

Check out SproutCore. It's a framework created by former Apple engineers and is used by Apple in MobileMe and iCloud web apps. It has SC.Drag which works with both mouse and touch events.

Upvotes: 6