Testing jQuery UI draggable()
Fig. On a regular screen, click and drag the moveable object around within the contraints of the image. The functionality should also be duplicated on touch screens via tap-drag, although more as an afterthought (see notes below).
The HTML
<div>
<div id="theDraggable"></div>
</div>The JavaScript
$("#theDraggable").draggable({
containment: "parent"
});The following basic code snippets also work…
$("#theDraggable").draggable();
…and…
$(function(){
$("#theDraggable").draggable();
});
Keep in mind, however, that as there is no container putting restraints on the element here, it is anarchistically freewheeling in its behaviour.
Notes
Internet Explorer 10 and earlier versions do not honour the draggable function. Note also that the experimental backdrop-filter: blur() is used for details behind the draggable element. At the time of writing this can only be enjoyed in iOS Safari 9.3 and Mac OS X Safari 10, but should not interfere with dragging.
The draggable functionality is part of the jQuery UI set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript library. It only listens for mouse events, not touch events, so what works beautifully on regular screens, can not be experienced or made useful for touch screen devices. Scott González, one of the developers of jQuery UI, is quoted as saying that the functionalty is slated for version 2.
In the meantime we have to resort to “hacks”, and the one plugin used for the test in this here article, is David Furfero’s jQuery UI Touch Punch, recommended by Scott González himself. It is not perfect. One observation is that the (green) move icon in the object used in this article, is not always returned to a visible state after touch screen dragging. The plug-in does, however, hint at what will be available in future versions of jQuery UI.
jQuery UI 1.12.1, with all its components, clocks in at 254 kB. As jQuery UI Touch Punch only depends on the core component Widget and the interactions component Mouse, a custom built version of jQuery UI is employed here. It also incorporates the core components :data Selector and scrollParent which the Draggable component itself depends on. The custom build shaved some 88% off the full version.
Image courtesy of Pixabay.
Move icon based on work by Dave Gandy.