JS library (with drag n drop) compatible with iOS and regular browsers
JavascriptJqueryIosMobileDrag and-DropJavascript Problem Overview
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...
Javascript Solutions
Solution 1 - Javascript
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/
Solution 2 - Javascript
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.
Solution 3 - Javascript
JQuery Mobile is trying to support a large variety of platforms
And here is a specific plugins for Drag and Drop
Solution 4 - Javascript
Try dojo. It works pretty well and it is a relatively mature toolkit. http://dojotoolkit.org/
Solution 5 - Javascript
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.
Solution 6 - Javascript
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)';
}
})
Solution 7 - Javascript
http://www.kendoui.com/ this should work. Has d'n'd too, even though it's still in Beta.
Solution 8 - Javascript
- zepto (smallest, iOS 4+, Android 2.2+, webOS 1.4.5+)
- jquery, jquerymobile, jqtouch
- prototype
- sencha, senchatouch
Solution 9 - Javascript
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:
Solution 10 - Javascript
Solution 11 - Javascript
If you are building web apps for ios you must try jquery mobile.
Solution 12 - Javascript
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!
Solution 13 - Javascript
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.