infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Drag and scroll inside boards

Browse Source
pull/1/head
yflory 5 years ago
parent b85d0fc9df
commit 56f5a75532
1 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File

37
www/kanban/jkanban.js
Unescape Escape View File

@ -88,9 +88,32 @@
var $inner = $el.find('.kanban-container'); var $inner = $el.find('.kanban-container');
var leftRegion = $el.position().left + 10; var leftRegion = $el.position().left + 10;
var rightRegion = $(window).width() - 10; var rightRegion = $(window).width() - 10;
var onMouseMove = function (e) { var activeBoard;
var $aB;
var setActiveDrag = function (board) {
activeBoard = undefined;
if (!board) { return; }
if (!board.classList.contains('kanban-drag')) { return; }
activeBoard = board;
$aB = $(activeBoard);
};
var onMouseMove = function (isItem) {
return function (e) {
if (e.which !== 1) { return; } // left click if (e.which !== 1) { return; } // left click
var distance = 20; var distance = 20;
// If this is an item drag, check scroll
if (isItem && activeBoard) {
var rect = activeBoard.getBoundingClientRect();
if (e.pageX > rect.left && e.pageX < rect.right) {
if (e.pageY < (rect.top + 10)) {
distance *= -1;
$aB.scrollTop(distance + $aB.scrollTop()) ;
} else if (e.pageY > (rect.bottom - 10)) {
$aB.scrollTop(distance + $aB.scrollTop()) ;
}
}
}
// Itme or board: horizontal scroll if needed
if (e.pageX < leftRegion) { if (e.pageX < leftRegion) {
distance *= -1; distance *= -1;
$el.scrollLeft(distance + $el.scrollLeft()) ; $el.scrollLeft(distance + $el.scrollLeft()) ;
@ -98,6 +121,7 @@
$el.scrollLeft(distance + $el.scrollLeft()) ; $el.scrollLeft(distance + $el.scrollLeft()) ;
} }
}; };
};
//set drag with dragula //set drag with dragula
if (window.innerWidth > self.options.responsive) { if (window.innerWidth > self.options.responsive) {
@ -124,12 +148,12 @@
if (typeof (el.dragfn) === 'function') { if (typeof (el.dragfn) === 'function') {
el.dragfn(el, source); el.dragfn(el, source);
} }
$(document).on('mousemove', onMouseMove); $(document).on('mousemove', onMouseMove());
}) })
.on('dragend', function (el) { .on('dragend', function (el) {
el.classList.remove('is-moving'); el.classList.remove('is-moving');
self.options.dragendBoard(el); self.options.dragendBoard(el);
$(document).off('mousemove', onMouseMove); $(document).off('mousemove');
if (typeof (el.dragendfn) === 'function') if (typeof (el.dragendfn) === 'function')
el.dragendfn(el); el.dragendfn(el);
}) })
@ -203,8 +227,9 @@
// we need to calculate the position before starting to drag // we need to calculate the position before starting to drag
self.dragItemPos = self.findElementPosition(el); self.dragItemPos = self.findElementPosition(el);
setActiveDrag();
el.classList.add('is-moving'); el.classList.add('is-moving');
$(document).on('mousemove', onMouseMove); $(document).on('mousemove', onMouseMove(el));
self.options.dragEl(el, source); self.options.dragEl(el, source);
if (el !== null && typeof (el.dragfn) === 'function') { if (el !== null && typeof (el.dragfn) === 'function') {
@ -215,7 +240,7 @@
console.log("In dragend"); console.log("In dragend");
el.classList.remove('is-moving'); el.classList.remove('is-moving');
self.options.dragendEl(el); self.options.dragendEl(el);
$(document).off('mousemove', onMouseMove); $(document).off('mousemove');
if (el !== null && typeof (el.dragendfn) === 'function') { if (el !== null && typeof (el.dragendfn) === 'function') {
el.dragendfn(el); el.dragendfn(el);
} }
@ -227,10 +252,12 @@
self.options.dragcancelEl(el, boardId); self.options.dragcancelEl(el, boardId);
}) })
.on('over', function (el, target, source) { .on('over', function (el, target, source) {
setActiveDrag(target);
if (!target.classList.contains('kanban-trash')) { return false; } if (!target.classList.contains('kanban-trash')) { return false; }
target.classList.add('kanban-trash-active'); target.classList.add('kanban-trash-active');
}) })
.on('out', function (el, target) { .on('out', function (el, target) {
setActiveDrag();
if (!target.classList.contains('kanban-trash')) { return false; } if (!target.classList.contains('kanban-trash')) { return false; }
target.classList.remove('kanban-trash-active'); target.classList.remove('kanban-trash-active');
}) })

Write Preview
Loading…
Cancel
Save