Drag drop functionality on iPad - javascript

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.

Related

How to make UI in PhoneGap, jQuery Mobile good?

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

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

JavaScript Mimics of the iPad's UI (specifically, UIDatePicker and UIPicker)

Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?
Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?
One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.
For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.
I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.
--- EDIT ---
A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.
#theazureshadow has a point that this is probably a bad idea for a mouse-based experience.
For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)
If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
I've been looking for the same thing today and found this pretty good implementation:
http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/
There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.

jquery iphone ui and jqtouch , which is better?

jquery iphone ui and jqtouch
they are lib of iphone , i want to choose one to use,
which is better ?
thanks
I have only used jQTouch, and have been happy about it. It's a fairly light-weight, yet powerful framework.
Peepcode has a nice introductory video tutorial on jQTouch for just $9. If you're evaluating it, you may want to give it a go.
One thing that took me a while to figure out is the use of a tab bar with jQTouch, which isn't directly supported with the current stable release. If you're using tab bar, you should use a later version of jQTouch.
JQuery iPhone UI seems like a more heavy-weight framework. I suggest you to get the full version and play with the demo applications that come with it. That should give you a good idea about the smoothness of the animations. One thing I found is that, this framework may actually support more than just WebKit, whereas jQTouch is pretty much targeted at WebKit browsers.

How do I make a JQuery Slider-like feature on iPhone/Android web app?

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.

Categories