othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving draggable jQuery extension

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-11-20 16:53:33 -02:00
parent b88c2f472b
commit f70d99a5c2
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
Packages/ohif-core/client/ui/draggable/draggable.js
View File

@ -13,23 +13,23 @@ $.fn.draggable = function(options) {
* *
* @param element * @param element
*/ */
function makeDraggable(element, options) { function makeDraggable(element, options={}) {
const $element = element; const $element = element;
// Force to hardware acceleration to move element if browser supports translate property // Force to hardware acceleration to move element if browser supports translate property
const { styleProperty } = OHIF.ui; const { styleProperty } = OHIF.ui;
const useTransform = styleProperty.check('transform', 'translate(1px, 1px)'); const useTransform = styleProperty.check('transform', 'translate(1px, 1px)');
const $container = $(window); const $container = $(options.container || window);
let diffX; let diffX;
let diffY; let diffY;
let wasNotDragged = true; let wasNotDragged = true;
let dragging = false;
let lastCursor, lastOffset; let lastCursor, lastOffset;
let lastTranslateX = 0; let lastTranslateX = 0;
let lastTranslateY = 0; let lastTranslateY = 0;
options = options || {};
options.defaultElementCursor = options.defaultElementCursor || 'default'; options.defaultElementCursor = options.defaultElementCursor || 'default';
// initialize dragged flag // initialize dragged flag
@ -103,10 +103,6 @@ function makeDraggable(element, options) {
diffY = cursor.y - elementTop; diffY = cursor.y - elementTop;
} }
$container.css('cursor', 'move');
$element.css('cursor', 'move');
$element.addClass('dragging');
reposition(elementLeft, elementTop); reposition(elementLeft, elementTop);
$(document).on('mousemove', moveHandler); $(document).on('mousemove', moveHandler);
@ -114,6 +110,28 @@ function makeDraggable(element, options) {
$(document).on('touchmove', moveHandler); $(document).on('touchmove', moveHandler);
$(document).on('touchend', stopMoving); $(document).on('touchend', stopMoving);
}
function stopMoving() {
$container.css('cursor', 'default');
$element.css('cursor', options.defaultElementCursor);
if (dragging) {
setTimeout(() => $element.removeClass('dragging'));
dragging = false;
}
$(document).off('mousemove', moveHandler);
$(document).off('touchmove', moveHandler);
}
function moveHandler(e) {
if (!dragging) {
$container.css('cursor', 'move');
$element.css('cursor', 'move');
$element.addClass('dragging');
dragging = true;
}
// let outside world know that the element in question has been dragged // let outside world know that the element in question has been dragged
if (wasNotDragged) { if (wasNotDragged) {
@ -121,18 +139,6 @@ function makeDraggable(element, options) {
wasNotDragged = false; wasNotDragged = false;
} }
}
function stopMoving() {
$container.css('cursor', 'default');
$element.css('cursor', options.defaultElementCursor);
$element.removeClass('dragging');
$(document).off('mousemove', moveHandler);
$(document).off('touchmove', moveHandler);
}
function moveHandler(e) {
// Prevent dialog box dragging whole page in iOS // Prevent dialog box dragging whole page in iOS
e.preventDefault(); e.preventDefault();