├── README.rst
├── example.html
└── jquery.draggableTouch.js
/README.rst:
--------------------------------------------------------------------------------
1 | jQuery Draggable Touch
2 | ======================
3 |
4 | Make HTML elements draggable, and supports multi touch. Main implementation uses
5 | touch events, but the plugin also has a fallback that uses mouse events.
6 |
7 | The main reason that this plugin exist is that there are currently no
8 | good jQuery plugin for making elements draggable, that has touch devices
9 | as it's main target (at least that I know of). `jQuery UI `_
10 | has a draggable plugin which, together with `jQuery UI Touch Punch `_,
11 | can be used to make elements draggable on touch devices. However, due to
12 | Touch Punch generating fake mouse events, and jQuery UI's draggable plugin, using these fake
13 | mouse events when dragging elements, it's error prone and contains weird bugs.
14 |
15 | I decided it was simpler to just write a draggable plugin whose main target
16 | was touch devices, and that uses touch events (even though it still has a
17 | fallback on mouseevents when the browser/device doesn't support touch events).
18 |
19 | Features
20 | --------
21 |
22 | * Main target is touch devices
23 | * Small and simple
24 | * Supports dragging multiple elements at the same time
25 |
26 |
27 | Usage example
28 | -------------
29 |
30 | ::
31 |
32 | $(".my-draggables")
33 | .draggableTouch()
34 | .bind("dragstart", function(event, pos) {
35 | console.log("drag started on:", this, "at position:", pos);
36 | })
37 | .bind("dragend", function(event, pos) {
38 | console.log("drag ended on:", this, "at position:", pos);
39 | });
40 |
41 | Set the position using :code:`transform` CSS property instead of :code:`left` and :code:`top`::
42 |
43 | $(".my-draggables").draggableTouch({useTransform:true});
44 |
45 | To disable dragability::
46 |
47 | $(".my-draggables").draggableTouch("disable");
48 |
49 |
50 | See example
51 | -----------
52 |
53 | `Here `_ is a super simple
54 | - and frankly quite ugly - example page.
55 |
56 |
57 | Copyright & License
58 | -------------------
59 |
60 | This plugin is written by `Jonatan Heyman `_ and is licenced as
61 | `Beerware `_.
62 |
63 |
64 |
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Draggable Touch Example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/jquery.draggableTouch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * jQuery Draggable Touch v0.6
3 | * Jonatan Heyman | http://heyman.info
4 | *
5 | * Make HTML elements draggable by using uses touch events.
6 | * The plugin also has a fallback that uses mouse events,
7 | * in case the device doesn't support touch events.
8 | *
9 | * Licenced under THE BEER-WARE LICENSE (Revision 42):
10 | * Jonatan Heyman (http://heyman.info) wrote this file. As long as you retain this
11 | * notice you can do whatever you want with this stuff. If we meet some day, and
12 | * you think this stuff is worth it, you can buy me a beer in return.
13 | */
14 | ;(function($){
15 | $.fn.draggableTouch = function(actionOrSettings) {
16 | // check if the device has touch support, and if not, fallback to use mouse
17 | // draggableMouse which uses mouse events
18 | if (window.ontouchstart === undefined) {
19 | return this.draggableMouse(actionOrSettings);
20 | }
21 |
22 | if (typeof(actionOrSettings) == "string") {
23 | // check if we shall make it not draggable
24 | if (actionOrSettings == "disable") {
25 | this.unbind("touchstart.draggableTouch");
26 | this.unbind("touchmove.draggableTouch");
27 | this.unbind("touchend.draggableTouch");
28 | this.unbind("touchcancel.draggableTouch");
29 |
30 | this.trigger("dragdisabled");
31 |
32 | return this;
33 | }
34 | } else {
35 | var useTransform = actionOrSettings && actionOrSettings.useTransform;
36 | }
37 |
38 | this.each(function() {
39 | var element = $(this);
40 | var offset = null;
41 | var draggingTouchId = null;
42 | var end = function(e) {
43 | e.preventDefault();
44 | var orig = e.originalEvent;
45 | for (var i=0; i