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...
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/
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.
JQuery Mobile is trying to support a large variety of platforms
And here is a specific plugins for Drag and Drop
Try dojo. It works pretty well and it is a relatively mature toolkit. http://dojotoolkit.org/
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.
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)';
}
})
http://www.kendoui.com/ this should work. Has d'n'd too, even though it's still in Beta.
zepto (smallest, iOS 4+, Android 2.2+, webOS 1.4.5+)
jquery, jquerymobile, jqtouch
prototype
sencha, senchatouch
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/
I'm not sure if its exactly what you're looking for, but you could try PhoneGap or maybe XUI.
If you are building web apps for ios you must try jquery mobile.
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!
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.
Related
I'm new to PhoneGap. I created a sample application using ponegap and jquery mobile which contain some button and few other form elements. While I installed in my mobile(Samsung Ace), i feel the UI of button and few other form elements are not looking good. Cornering in button is not perfect.
I'm using the following
cordova-2.9.0.jar
jquery-2.0.3.min.js
jquery.mobile-1.3.2.min.js
jquery.mobile-1.3.2.min.css
Am i missing anything? Please help me.How to make the UI look and feel good?
Thanks
To make UI in Phonegap, jQuery Mobile is good, but not the best. If You want the best result in performance and UI then you'll have to use Sencha Touch. Please visit this Link it may be helpful to you.
I would suggest to use ThemeRoller to get your UI in jQuerymobile framework
Check the following link
http://jquerymobile.com/themeroller/index.php
Speaking for myself, I've used jQuery Mobile with Phonegap, and I'm fairly happy with it. I don't think the problem you're having with the corners is jquery mobile, but rather related to whatever emulator program you're using; they work fine for me on various resolutions on my laptop, tablet, s3 & iphone, even when I zoom out/in between 25% and 500% on chrome using ripple.
To make a nicer interface, you can use jQuery Mobile's ThemeRoller.
jQuery Mobile framework is not important for phonegap app, you can customize your own styles using normal HTML and CSS (CSS3 also).
I need some help. I am trying to work on a mobile web page. What i'm trying to do is "capture" when the user does a zoom in/zoom out action. That is, when they put two fingers on screen and separate or close their fingers together. I looked at jquery mobile and didn't see it.
So specifically can I attach a javascript function to a pinch/zoom event in a mobile device?
Any help would be greatly appreciated.
hammer.js https://hammerjs.github.io/ is one of the best javascript library for such problems..
Zepto is a jquery compatible library for mobile and provides handlers for pinch events. Unfortunately, they are listed as iOS only. (See "Touch Events")
Synopsis:
$('some selector').pinch(function(){ ... });
$('some selector').pinchIn(function(){ ... });
$('some selector').pinchOut(function(){ ... });
Touchy is a jQuery plugin that provides support for pinch, drag, swipe, longpress, rotate. It works on any browser that implements touchstart, touchmove and touchend. Future versions will also support IE10.
Does anyone know like if it is possible to implement the drag-drop functionality on the iPad?
Something similar to what is available on;
http://jqueryui.com/demos/droppable/
I mean if this can be implemented directly or via some workaround..
Looking at the tags, I'm guessing you're not looking for a native solution. Have you looked into a mobile javascript framework such as Sencha Touch? It seems to have the support you need, and is specifically designed for mobile development:
http://www.sencha.com/products/touch/
You can use this script https://github.com/furf/jquery-ui-touch-punch for playing jquery UI features in Ipad or Iphone.
Hope it helps.
Hey! Just checkin in to see if there's a function similar to js onmousemove (jquery mousemove) for touch phones? Seems like jQuery mobile doesn't have it and I'm pretty new to all this with mobiles.
/tn
Check the jQuery UI for iPad and iPhone project. It supports Android too.
jQuery:
$(element).bind('touchmove', function(){
});
in jQuery-less javascript, it is ontouchmove.
If you want to convert your current mouse events over to touch, just add this 'touch punch' plugin:
http://touchpunch.furf.com/
This is very close to what I was looking for:
http://swipejs.com/
In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)
You may need to write this from scratch. Luckily, #ppk has coded up an example of drag and drop for iPhone.
Listen for touch events and move the slider accordingly. These events also work on Android as it also uses WebKit.
You can use this library http://touchpunch.furf.com/
This provides touch events for all the jquery ui elements.
I found sample code online which converts touch events to mouse events. I tested this with jquery-ui's slider and it worked nicely!
Link to source
You can do this for iphone, android and windows phones via jquery+javascript. Windows phone with IE has one flaw, I have not been able to get it to snap to div sections.
I used this to wire up http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ the slider. Works like a charm, just be sure to replace the code that works against specific dom elements. Then add $('#sliderdiv').addTouch (). Works on IPhone, but doesn't work for Android. According to quirksmode touch events don't work on Android.