Dragging, Dropping, and Sorting
In a previous post, I talked about how recent versions of ClassicPress have removed from core and deprecated the thickbox library, and I also explained how developers can follow suit in their themes and plugins. In this post, I am going to tell a similar story about the jQuery UI library, which ClassicPress has now also removed from core and deprecated.
Touchscreen problems
Arguably the main reason that WordPress originally adopted the jQuery UI library was to enable dragging, dropping, and sorting. But the jQuery UI modules that made these tasks possible were designed to work with a mouse. As a result, they never worked on touchscreens, and another library (jQuery Touch Punch) from an independent developer therefore had to be retrofitted to make it possible to perform dragging, dropping, and sorting on a touchscreen.
But that was in the early days of touchscreen development, and jQuery Touch Punch hasn’t kept up. The result is that dragging, dropping, and sorting on a touchscreen just don’t work any more.
Fortunately, two parallel developments mean that it’s possible to switch to something much better, and that is what ClassicPress has done. Dragging and dropping is now performed using native HTML5 markup and simple, vanilla JavaScript that leverages functionality that is now built in to every browser; sorting is now performed using the modern SortableJS library, which we bundle at ~/wp-includes/js/sortable.min.js.
Dragging and Dropping
Dragging an element is made possible simply by adding a draggable attribute to it. Then, when you hold the mouse down on this element and start to drag it, the dragstart event will fire. You can then capture that with an appropriate listener, like this:
draggableElement.addEventListener( 'dragstart', function( event ) {
It’s always worth starting by sending the event to the browser console to see what it contains: console.log( event ). In this case, the event.target is the element being dragged. And here’s a bonus: this also works if you drag the draggable element with your finger on a touchscreen!
As you continue to drag the element, the drag event fires repeatedly and may also be captured by a listener. The dragend event fires when you stop dragging the element, while the dragover event fires when you drag the element over a droppable area.
So how do you create a droppable area? Essentially, by preventing the default behavior when something else is being dragged over it. So this means we need to write:
droppableElement.addEventListener( 'dragenter', function( event ) {
event.preventDefault();
}
droppableElement.addEventListener( 'dragover', function( event ) {
event.preventDefault();
}
Of course, there’s no point in dragging and dropping unless it’s achieving some other goal, and there’s a dataTransfer object to provide the necessary functionality. I suggest you read the article, JavaScript Drag and Drop, for a fuller explanation with examples.
Sorting
You could also look at some code in ~/wp-admin/js/widgets.js to see how ClassicPress makes use of the dragover and dragleave events. However, when ClassicPress core needs drag and drop capability, it also needs sortable functionality. As a result, most instances of drag and drop within ClassicPress core are handled by leveraging the SortableJS library, which is now to be found in ClassicPress at ~/wp-includes/js/sortable.min.js.
It should be emphasized, though, that this is essentially for convenience and to avoid confusion, because SortableJS itself uses the drag and drop methods already described.
A full guide to using SortableJS is provided at its GitHub site. If you want to see how ClassicPress makes use of it, then take a look at the following files:
~/wp-admin/js/nav-menu.js~/wp-admin/js/postbox.js~/wp-admin/js/widgets.js
Updating
While jQuery UI has been deprecated and removed from core, it will continue to work in themes and plugins for the foreseeable future. However, deprecation means that the library may be removed from the bundle of scripts and styles supplied with ClassicPress when we get to version 3.0. So it’s worth taking some time now to work out how best to go about updating your code, whether that involves using the native HTML5 functionality or the SortableJS library.
You will be happy you did. Both options run faster than jQuery UI, require less code, and are accessible by default. And they both work on touchscreens, including mobile devices.