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

fix(draggableDialogs) Improving draggable plugin

Browse Source
This commit is contained in:
Bruno Alves de Faria 2018-04-11 10:57:19 -03:00 committed by Erik Ziegler
parent e6beb8036c
commit e07118c7c4
1 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,8 @@ $.fn.draggable = function(options) {
*/ */
function makeDraggable(element, options={}) { function makeDraggable(element, options={}) {
const $element = element; const $element = element;
const $document = $(document);
const $body = $(document.body);
// 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;
@ -30,7 +32,7 @@ function makeDraggable(element, options={}) {
let lastTranslateX = 0; let lastTranslateX = 0;
let lastTranslateY = 0; let lastTranslateY = 0;
options.defaultElementCursor = options.defaultElementCursor || 'default'; let initialCursor;
// initialize dragged flag // initialize dragged flag
$element.data('wasDragged', false); $element.data('wasDragged', false);
@ -105,28 +107,30 @@ function makeDraggable(element, options={}) {
reposition(elementLeft, elementTop); reposition(elementLeft, elementTop);
$(document).on('mousemove', moveHandler); $document.on('mousemove', moveHandler);
$(document).on('mouseup', stopMoving); $document.on('mouseup', stopMoving);
$(document).on('touchmove', moveHandler); $document.on('touchmove', moveHandler);
$(document).on('touchend', stopMoving); $document.on('touchend', stopMoving);
} }
function stopMoving() { function stopMoving() {
$container.css('cursor', 'default'); $body.css('cursor', '');
$element.css('cursor', options.defaultElementCursor); $container.css('cursor', '');
$element.css('cursor', '');
if (dragging) { if (dragging) {
setTimeout(() => $element.removeClass('dragging')); setTimeout(() => $element.removeClass('dragging'));
dragging = false; dragging = false;
} }
$(document).off('mousemove', moveHandler); $document.off('mousemove', moveHandler);
$(document).off('touchmove', moveHandler); $document.off('touchmove', moveHandler);
} }
function moveHandler(e) { function moveHandler(e) {
if (!dragging) { if (!dragging) {
$body.css('cursor', 'move');
$container.css('cursor', 'move'); $container.css('cursor', 'move');
$element.css('cursor', 'move'); $element.css('cursor', 'move');
$element.addClass('dragging'); $element.addClass('dragging');
@ -193,6 +197,33 @@ function makeDraggable(element, options={}) {
reposition(elementLeft, elementTop); reposition(elementLeft, elementTop);
} }
$element.on('mousedown', startMoving); function mouseDownHandler(e) {
$element.on('touchstart', startMoving); initialCursor = getCursorCoords(e);
$document.on('mousemove', moveDetectHandler);
$document.on('touchmove', moveDetectHandler);
}
function mouseUpHandler() {
$document.off('mousemove', moveDetectHandler);
$document.off('touchmove', moveDetectHandler);
}
function moveDetectHandler(e) {
const currentCursor = getCursorCoords(e);
const c1 = initialCursor;
const c2 = currentCursor;
const distance = Math.hypot(c2.x - c1.x, c2.y - c1.y);
if (distance > 5) {
mouseUpHandler();
startMoving(e);
}
}
$element.on('mousedown', mouseDownHandler);
$element.on('touchstart', mouseDownHandler);
$element.on('mouseup', mouseUpHandler);
$element.on('touchend', mouseUpHandler);
} }