jQuery UI like draggable widget
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Touch Draggable

A very simple draggable implementation for tablet/mobile devices. It implement a tiny portion of the interface of the jquery-ui draggable widget, at least only the one I needed to make it works on one of my personal projects I was working on.

It does not have the entire power of the jquery-ui one, but since that required to simulate the mouse events and was moving top,left properties, on devices like iPad/iPhone the performance, was not that good, and that was a shame because those devices support hardware acceleration for other css properties.

So I'm completely sure the guys from jquery-ui will fix this very soon in the next upcoming version. For now I just want to share this tiny library in case anybody is interested :)

Getting Started

Download the production version or the development version.

In your web page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="dist/touch-draggable.js"></script>
<script>
$(function($) {
  $('.box.touch').touchDraggable();
});
</script>

Documentation

(Coming soon)

Basically the handler option and the addClasses property is all that is implemented in this version. That's all I need for now.

Examples

check the demo folder, load it on a iOS device or a Android device with Jelly Bean to obtain the best performance!. The demo has the jquery UI draggable and this one so you can make a quick comparison.

Release History

  • version 0.0.1 First things added

License

Copyright (c) 2012 Roy Riojas
Licensed under the MIT, GPL licenses.

Contributing

Feel free to do it!

Important notes

Please don't edit files in the dist subdirectory as they are generated via grunt. You'll find source code in the src subdirectory!

While grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the test/*.html unit test file(s) in actual browsers.

Installing grunt

This assumes you have node.js and npm installed already.

  1. Test that grunt is installed globally by running grunt --version at the command-line.
  2. If grunt isn't installed globally, run npm install -g grunt to install the latest version. You may need to run sudo npm install -g grunt.
  3. From the root directory of this project, run npm install to install the project's dependencies.

Installing PhantomJS

In order for the qunit task to work properly, PhantomJS must be installed and in the system PATH (if you can run "phantomjs" at the command line, this task should work).

Unfortunately, PhantomJS cannot be installed automatically via npm or grunt, so you need to install it yourself. There are a number of ways to install PhantomJS.

Note that the phantomjs executable needs to be in the system PATH for grunt to see it.