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...

回答1:

Here's two built in jQuery:

http://www.stevefenton.co.uk/cmsfiles/assets/File/mobiledragdrop.html

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

There is also the jquery mobile framework (which does not have drag and drop nativly): http://jquerymobile.com/

回答2:

I'm a big fan of Sencha Touch.

Here's there drag and drop demo - http://dev.sencha.com/deploy/touch/examples/dragdrop/.

Note: Tested on my iPhone 4 in Safari.

回答3:

JQuery Mobile is trying to support a large variety of platforms

And here is a specific plugins for Drag and Drop

回答4:

Try dojo. It works pretty well and it is a relatively mature toolkit. http://dojotoolkit.org/

回答5:

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.

回答6:

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)';
    }
  })

回答7:

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

回答8:

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

回答9:

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/

回答10:

I'm not sure if its exactly what you're looking for, but you could try PhoneGap or maybe XUI.

回答11:

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

回答12:

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!

回答13:

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.

来源：https://stackoverflow.com/questions/7168514/js-library-with-drag-n-drop-compatible-with-ios-and-regular-browsers

标签

javascript

jquery

ios

mobile

drag-and-drop