mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
MDL-62411 qtype_ddmarker: add dragdrop helper libarary
This was created by the Open University a couple of years ago, and is very helpful for making dragging work reliably on a range of browsers and with both mouse and touch-screens. Sadly, HTML5 drag-drop is not yet ready for prime-time.
This commit is contained in:
John Beedell
Tim Hunt
parent
cc486e6125
commit
0b1cc2890f
2 changed files with 341 additions and 0 deletions
1
lib/amd/build/dragdrop.min.js
vendored
Normal file
1
lib/amd/build/dragdrop.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
define(["jquery","core/autoscroll"],function(a,b){var c={eventCaptureOptions:{passive:!1,capture:!0},dragProxy:null,onMove:null,onDrop:null,initialPosition:null,initialX:null,initialY:null,touching:null,prepare:function(a){a.preventDefault();var b;if(b="touchstart"===a.type?null===c.touching&&a.changedTouches.length>0:1===a.which){var d=c.getEventXY(a);return d.start=!0,d}return{start:!1}},start:function(a,d,e,f){var g=c.getEventXY(a);switch(c.initialX=g.x,c.initialY=g.y,c.initialPosition=d.offset(),c.dragProxy=d,c.onMove=e,c.onDrop=f,a.type){case"mousedown":c.addEventSpecial("mousemove",c.mouseMove),c.addEventSpecial("mouseup",c.mouseUp);break;case"touchstart":c.addEventSpecial("touchend",c.touchEnd),c.addEventSpecial("touchcancel",c.touchEnd),c.addEventSpecial("touchmove",c.touchMove),c.touching=a.changedTouches[0].identifier;break;default:throw new Error("Unexpected event type: "+a.type)}b.start(c.scroll)},addEventSpecial:function(a,b){try{window.addEventListener(a,b,c.eventCaptureOptions)}catch(d){c.eventCaptureOptions=!0,window.addEventListener(a,b,c.eventCaptureOptions)}},getEventXY:function(a){switch(a.type){case"touchstart":return{x:a.changedTouches[0].pageX,y:a.changedTouches[0].pageY};case"mousedown":return{x:a.pageX,y:a.pageY};default:throw new Error("Unexpected event type: "+a.type)}},touchMove:function(a){a.preventDefault();for(var b=0;b<a.changedTouches.length;b++)a.changedTouches[b].identifier===c.touching&&c.handleMove(a.changedTouches[b].pageX,a.changedTouches[b].pageY)},mouseMove:function(a){c.handleMove(a.pageX,a.pageY)},handleMove:function(b,d){var e=c.dragProxy.offset(),f=e.top-parseInt(c.dragProxy.css("top")),g=e.left-parseInt(c.dragProxy.css("left")),h=a(document).height()-c.dragProxy.outerHeight()-f,i=a(document).width()-c.dragProxy.outerWidth()-g,j=-f,k=-g,l=c.initialPosition,m={top:Math.max(j,Math.min(h,l.top+(d-c.initialY)-f)),left:Math.max(k,Math.min(i,l.left+(b-c.initialX)-g))};c.dragProxy.css(m),c.onMove(b,d,c.dragProxy)},touchEnd:function(a){a.preventDefault();for(var b=0;b<a.changedTouches.length;b++)a.changedTouches[b].identifier===c.touching&&c.handleEnd(a.changedTouches[b].pageX,a.changedTouches[b].pageY)},mouseUp:function(a){c.handleEnd(a.pageX,a.pageY)},handleEnd:function(a,d){null!==c.touching?(window.removeEventListener("touchend",c.touchEnd,c.eventCaptureOptions),window.removeEventListener("touchcancel",c.touchEnd,c.eventCaptureOptions),window.removeEventListener("touchmove",c.touchMove,c.eventCaptureOptions),c.touching=null):(window.removeEventListener("mousemove",c.mouseMove,c.eventCaptureOptions),window.removeEventListener("mouseup",c.mouseUp,c.eventCaptureOptions)),b.stop(),c.onDrop(a,d,c.dragProxy)},scroll:function(b){var d=a(document).height()-c.dragProxy.outerHeight(),e=c.dragProxy.offset();e.top=Math.min(d,e.top+b),c.dragProxy.css(e)}};return{prepare:c.prepare,start:c.start}});
|
||||
340
lib/amd/src/dragdrop.js
vendored
Normal file
340
lib/amd/src/dragdrop.js
vendored
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
// This file is part of Moodle - http://moodle.org/
|
||||
//
|
||||
// Moodle is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// Moodle is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
/*
|
||||
* JavaScript to handle drag operations, including automatic scrolling.
|
||||
*
|
||||
* Note: this module is defined statically. It is a singleton. You
|
||||
* can only have one use of it active at any time. However, you
|
||||
* can only drag one thing at a time, this is not a problem in practice.
|
||||
*
|
||||
* @module core/dragdrop
|
||||
* @class dragdrop
|
||||
* @package core
|
||||
* @copyright 2016 The Open University
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
* @since 3.6
|
||||
*/
|
||||
define(['jquery', 'core/autoscroll'], function($, autoScroll) {
|
||||
/**
|
||||
* @alias module:core/dragdrop
|
||||
*/
|
||||
var dragdrop = {
|
||||
/**
|
||||
* A boolean or options argument depending on whether browser supports passive events.
|
||||
* @private
|
||||
*/
|
||||
eventCaptureOptions: {passive: false, capture: true},
|
||||
|
||||
/**
|
||||
* Drag proxy if any.
|
||||
* @private
|
||||
*/
|
||||
dragProxy: null,
|
||||
|
||||
/**
|
||||
* Function called on move.
|
||||
* @private
|
||||
*/
|
||||
onMove: null,
|
||||
|
||||
/**
|
||||
* Function called on drop.
|
||||
* @private
|
||||
*/
|
||||
onDrop: null,
|
||||
|
||||
/**
|
||||
* Initial position of proxy at drag start.
|
||||
*/
|
||||
initialPosition: null,
|
||||
|
||||
/**
|
||||
* Initial page X of cursor at drag start.
|
||||
*/
|
||||
initialX: null,
|
||||
|
||||
/**
|
||||
* Initial page Y of cursor at drag start.
|
||||
*/
|
||||
initialY: null,
|
||||
|
||||
/**
|
||||
* If touch event is in progress, this will be the id, otherwise null
|
||||
*/
|
||||
touching: null,
|
||||
|
||||
/**
|
||||
* Prepares to begin a drag operation - call with a mousedown or touchstart event.
|
||||
*
|
||||
* If the returned object has 'start' true, then you can set up a drag proxy, and call
|
||||
* start. This function will call preventDefault automatically regardless of whether
|
||||
* starting or not.
|
||||
*
|
||||
* @public
|
||||
* @param {Object} event Event (should be either mousedown or touchstart)
|
||||
* @return {Object} Object with start (boolean flag) and x, y (only if flag true) values
|
||||
*/
|
||||
prepare: function(event) {
|
||||
event.preventDefault();
|
||||
var start;
|
||||
if (event.type === 'touchstart') {
|
||||
// For touch, start if there's at least one touch and we are not currently doing
|
||||
// a touch event.
|
||||
start = (dragdrop.touching === null) && event.changedTouches.length > 0;
|
||||
} else {
|
||||
// For mousedown, start if it's the left button.
|
||||
start = event.which === 1;
|
||||
}
|
||||
if (start) {
|
||||
var details = dragdrop.getEventXY(event);
|
||||
details.start = true;
|
||||
return details;
|
||||
} else {
|
||||
return {start: false};
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Call to start a drag operation, in response to a mouse down or touch start event.
|
||||
* Normally call this after calling prepare and receiving start true (you can probably
|
||||
* skip prepare if only supporting drag not touch).
|
||||
*
|
||||
* Note: The caller is responsible for creating a 'drag proxy' which is the
|
||||
* thing that actually gets dragged. At present, this doesn't really work
|
||||
* properly unless it is added directly within the body tag.
|
||||
*
|
||||
* You also need to ensure that there is CSS so the proxy is absolutely positioned,
|
||||
* and styled to look like it is floating.
|
||||
*
|
||||
* You also need to absolutely position the proxy where you want it to start.
|
||||
*
|
||||
* @public
|
||||
* @param {Object} event Event (should be either mousedown or touchstart)
|
||||
* @param {jQuery} dragProxy An absolute-positioned element for dragging
|
||||
* @param {Object} onMove Function that receives X and Y page locations for a move
|
||||
* @param {Object} onDrop Function that receives X and Y page locations when dropped
|
||||
*/
|
||||
start: function(event, dragProxy, onMove, onDrop) {
|
||||
var xy = dragdrop.getEventXY(event);
|
||||
dragdrop.initialX = xy.x;
|
||||
dragdrop.initialY = xy.y;
|
||||
dragdrop.initialPosition = dragProxy.offset();
|
||||
dragdrop.dragProxy = dragProxy;
|
||||
dragdrop.onMove = onMove;
|
||||
dragdrop.onDrop = onDrop;
|
||||
|
||||
switch (event.type) {
|
||||
case 'mousedown':
|
||||
// Cannot use jQuery 'on' because events need to not be passive.
|
||||
dragdrop.addEventSpecial('mousemove', dragdrop.mouseMove);
|
||||
dragdrop.addEventSpecial('mouseup', dragdrop.mouseUp);
|
||||
break;
|
||||
case 'touchstart':
|
||||
dragdrop.addEventSpecial('touchend', dragdrop.touchEnd);
|
||||
dragdrop.addEventSpecial('touchcancel', dragdrop.touchEnd);
|
||||
dragdrop.addEventSpecial('touchmove', dragdrop.touchMove);
|
||||
dragdrop.touching = event.changedTouches[0].identifier;
|
||||
break;
|
||||
default:
|
||||
throw new Error('Unexpected event type: ' + event.type);
|
||||
}
|
||||
autoScroll.start(dragdrop.scroll);
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds an event listener with special event capture options (capture, not passive). If the
|
||||
* browser does not support passive events, it will fall back to the boolean for capture.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} event Event type string
|
||||
* @param {Object} handler Handler function
|
||||
*/
|
||||
addEventSpecial: function(event, handler) {
|
||||
try {
|
||||
window.addEventListener(event, handler, dragdrop.eventCaptureOptions);
|
||||
} catch (ex) {
|
||||
dragdrop.eventCaptureOptions = true;
|
||||
window.addEventListener(event, handler, dragdrop.eventCaptureOptions);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets X/Y co-ordinates of an event, which can be either touchstart or mousedown.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} event Event (should be either mousedown or touchstart)
|
||||
* @return {Object} X/Y co-ordinates
|
||||
*/
|
||||
getEventXY: function(event) {
|
||||
switch (event.type) {
|
||||
case 'touchstart':
|
||||
return {x: event.changedTouches[0].pageX,
|
||||
y: event.changedTouches[0].pageY};
|
||||
case 'mousedown':
|
||||
return {x: event.pageX, y: event.pageY};
|
||||
default:
|
||||
throw new Error('Unexpected event type: ' + event.type);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for touch move.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} e Event
|
||||
*/
|
||||
touchMove: function(e) {
|
||||
e.preventDefault();
|
||||
for (var i = 0; i < e.changedTouches.length; i++) {
|
||||
if (e.changedTouches[i].identifier === dragdrop.touching) {
|
||||
dragdrop.handleMove(e.changedTouches[i].pageX, e.changedTouches[i].pageY);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for mouse move.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} e Event
|
||||
*/
|
||||
mouseMove: function(e) {
|
||||
dragdrop.handleMove(e.pageX, e.pageY);
|
||||
},
|
||||
|
||||
/**
|
||||
* Shared handler for move event (mouse or touch).
|
||||
*
|
||||
* @private
|
||||
* @param {number} pageX X co-ordinate
|
||||
* @param {number} pageY Y co-ordinate
|
||||
*/
|
||||
handleMove: function(pageX, pageY) {
|
||||
// Move the drag proxy, not letting you move it out of screen or window bounds.
|
||||
var current = dragdrop.dragProxy.offset();
|
||||
var topOffset = current.top - parseInt(dragdrop.dragProxy.css('top'));
|
||||
var leftOffset = current.left - parseInt(dragdrop.dragProxy.css('left'));
|
||||
var maxY = $(document).height() - dragdrop.dragProxy.outerHeight() - topOffset;
|
||||
var maxX = $(document).width() - dragdrop.dragProxy.outerWidth() - leftOffset;
|
||||
var minY = -topOffset;
|
||||
var minX = -leftOffset;
|
||||
var initial = dragdrop.initialPosition;
|
||||
var position = {
|
||||
top: Math.max(minY, Math.min(maxY, initial.top + (pageY - dragdrop.initialY) - topOffset)),
|
||||
left: Math.max(minX, Math.min(maxX, initial.left + (pageX - dragdrop.initialX) - leftOffset))
|
||||
};
|
||||
dragdrop.dragProxy.css(position);
|
||||
|
||||
// Trigger move handler.
|
||||
dragdrop.onMove(pageX, pageY, dragdrop.dragProxy);
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for touch end.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} e Event
|
||||
*/
|
||||
touchEnd: function(e) {
|
||||
e.preventDefault();
|
||||
for (var i = 0; i < e.changedTouches.length; i++) {
|
||||
if (e.changedTouches[i].identifier === dragdrop.touching) {
|
||||
dragdrop.handleEnd(e.changedTouches[i].pageX, e.changedTouches[i].pageY);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for mouse up.
|
||||
*
|
||||
* @private
|
||||
* @param {Object} e Event
|
||||
*/
|
||||
mouseUp: function(e) {
|
||||
dragdrop.handleEnd(e.pageX, e.pageY);
|
||||
},
|
||||
|
||||
/**
|
||||
* Shared handler for end drag (mouse or touch).
|
||||
*
|
||||
* @private
|
||||
* @param {number} pageX X
|
||||
* @param {number} pageY Y
|
||||
*/
|
||||
handleEnd: function(pageX, pageY) {
|
||||
if (dragdrop.touching !== null) {
|
||||
window.removeEventListener('touchend', dragdrop.touchEnd, dragdrop.eventCaptureOptions);
|
||||
window.removeEventListener('touchcancel', dragdrop.touchEnd, dragdrop.eventCaptureOptions);
|
||||
window.removeEventListener('touchmove', dragdrop.touchMove, dragdrop.eventCaptureOptions);
|
||||
dragdrop.touching = null;
|
||||
} else {
|
||||
window.removeEventListener('mousemove', dragdrop.mouseMove, dragdrop.eventCaptureOptions);
|
||||
window.removeEventListener('mouseup', dragdrop.mouseUp, dragdrop.eventCaptureOptions);
|
||||
}
|
||||
autoScroll.stop();
|
||||
dragdrop.onDrop(pageX, pageY, dragdrop.dragProxy);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the page scrolls.
|
||||
*
|
||||
* @private
|
||||
* @param {number} offset Amount of scroll
|
||||
*/
|
||||
scroll: function(offset) {
|
||||
// Move the proxy to match.
|
||||
var maxY = $(document).height() - dragdrop.dragProxy.outerHeight();
|
||||
var currentPosition = dragdrop.dragProxy.offset();
|
||||
currentPosition.top = Math.min(maxY, currentPosition.top + offset);
|
||||
dragdrop.dragProxy.css(currentPosition);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
/**
|
||||
* Prepares to begin a drag operation - call with a mousedown or touchstart event.
|
||||
*
|
||||
* If the returned object has 'start' true, then you can set up a drag proxy, and call
|
||||
* start. This function will call preventDefault automatically regardless of whether
|
||||
* starting or not.
|
||||
*
|
||||
* @param {Object} event Event (should be either mousedown or touchstart)
|
||||
* @return {Object} Object with start (boolean flag) and x, y (only if flag true) values
|
||||
*/
|
||||
prepare: dragdrop.prepare,
|
||||
|
||||
/**
|
||||
* Call to start a drag operation, in response to a mouse down or touch start event.
|
||||
* Normally call this after calling prepare and receiving start true (you can probably
|
||||
* skip prepare if only supporting drag not touch).
|
||||
*
|
||||
* Note: The caller is responsible for creating a 'drag proxy' which is the
|
||||
* thing that actually gets dragged. At present, this doesn't really work
|
||||
* properly unless it is added directly within the body tag.
|
||||
*
|
||||
* You also need to ensure that there is CSS so the proxy is absolutely positioned,
|
||||
* and styled to look like it is floating.
|
||||
*
|
||||
* You also need to absolutely position the proxy where you want it to start.
|
||||
*
|
||||
* @param {Object} event Event (should be either mousedown or touchstart)
|
||||
* @param {jQuery} dragProxy An absolute-positioned element for dragging
|
||||
* @param {Object} onMove Function that receives X and Y page locations for a move
|
||||
* @param {Object} onDrop Function that receives X and Y page locations when dropped
|
||||
*/
|
||||
start: dragdrop.start
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue