General developer forum

Any interest in a new lightweight dragdrop javascript library?

 
Picture of John Beedell
Any interest in a new lightweight dragdrop javascript library?
 

Would anyone use a new lightweight dragdrop javascript library if it were available?

I am updating the drag drop question types from yui to jquery/amd and adding a few enhancements. The first of these is ddmarker (see https://tracker.moodle.org/browse/MDL-62411) and the code is available on github.

I have used a dragdrop javascript library that we have used at the OU for several years, as it is lightweight and easy to use. It also has the added benefit of coping with the iOS 11.3 event issues that is affecting several areas of code (see MDL-62239 and MDL-62319).

To use this lib (assuming it gets accepted in to core):

// Add initial references.
define(['jquery', 'core/dragdrop'], function($, dd) {
 ...
 $('#myDragItemsArea').on('mousedown touchstart', function(event) {
   event.preventDefault();
   var draggable = $('#myDraggableItem);
   dd.prepare(event);
   dd.start(event, draggable, myOnMoveCallback, myOnDropCallback);
 }
 ...
}

Its that simple. The draggable item will now just follow the mouse, and it is possible to add your own callbacks to do things like register the final position on drop, or on move. And it works on iOS 11.3.

On a similar note would anyone use the svg.js lib (see https://svgdotjs.github.io/ by Wout Fierens). It is billed as a lightweight library for manipulating and animating SVG.

It certainly has helped me improve the ddmarker question editing page for teachers. That library made it easy to add a prototype drop area shape to the preview image and then to use the mouse to position and resize the shape. Previously it was necessary for teachers to input exact coordinates to define a shape, something that put off many who might have wanted to use this question type. Again the code for this can be viewed on github (accessed via MDL-62411).

 
Average of ratings: -