mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 15:30:13 +01:00
469 lines
No EOL
15 KiB
HTML
469 lines
No EOL
15 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
<head>
|
|
<title>WeKan ® - MultiDrag at InteractJS.io</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,width=device-width">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="application-name" content="WeKan ®">
|
|
<meta name="msapplication-TileColor" content="#00aba9">
|
|
<meta name="theme-color" content="#fff">
|
|
<style>
|
|
/* VML for IE */
|
|
v\:* {
|
|
behavior: url(#default#VML);
|
|
}
|
|
|
|
#drag-1, #drag-2, #drag-3, #drag-4, #drag-5,
|
|
#drag-6, #drag-7, #drag-8, #drag-9, #drag-10 {
|
|
color: white;
|
|
/* margin: 1rem 0 0 1rem; */
|
|
touch-action: none;
|
|
user-select: none;
|
|
transform: translate(0px, 0px);
|
|
cursor: move;
|
|
border-radius: 25px;
|
|
padding: 20px;
|
|
/* background GIF produces dithered background at Amiga IBrowse, so better to use
|
|
table background color to get solid color
|
|
background:url("img/round-blue.gif") top left no-repeat; */
|
|
outline: none; /* Remove default browser focus outline */
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
|
|
}
|
|
|
|
/* At active card at, show red border and shadow on focus*/
|
|
#drag-1:focus, #drag-2:focus, #drag-3:focus,
|
|
#drag-4:focus, #drag-5:focus, #drag-6:focus,
|
|
#drag-7:focus, #drag-8:focus, #drag-9:focus,
|
|
#drag-10:focus {
|
|
border-color: #f00; /* Red border on focus */
|
|
box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.5); /* Red shadow on focus */
|
|
height: 60px;
|
|
}
|
|
|
|
|
|
/* top + 130px is next position +20 ... background-color: #5e98c2; */
|
|
#drag-1 { position: absolute; top: 300px; left: 10px;}
|
|
#drag-2 { position: absolute; top: 430px; left: 10px;}
|
|
#drag-3 { position: absolute; top: 560px; left: 10px; }
|
|
#drag-4 { position: absolute; top: 690px; left: 10px;}
|
|
#drag-5 { position: absolute; top: 820px; left: 10px;}
|
|
#drag-6 { position: absolute; top: 300px; left: 260px; }
|
|
#drag-7 { position: absolute; top: 430px; left: 260px; }
|
|
#drag-8 { position: absolute; top: 560px; left: 260px; }
|
|
#drag-9 { position: absolute; top: 690px; left: 260px; }
|
|
#drag-10 { position: absolute; top: 820px; left: 260px; }
|
|
|
|
.draggable {
|
|
touch-action: none;
|
|
}
|
|
|
|
.redlines {
|
|
position: fixed; /* or position: absolute */
|
|
top: 440px;
|
|
left: 150px;
|
|
width: 50px;
|
|
height: 2px;
|
|
pointer-events: none; /* so that below cards can be clicked */
|
|
}
|
|
</style>
|
|
|
|
<script src="js/interact.js"></script>
|
|
<style type="text/css">
|
|
#drop_file_zone {
|
|
background-color: #EEE;
|
|
border: #999 5px dashed;
|
|
width: 290px;
|
|
height: 200px;
|
|
padding: 8px;
|
|
font-size: 18px;
|
|
}
|
|
#drag_upload_file {
|
|
width:50%;
|
|
margin:0 auto;
|
|
}
|
|
#drag_upload_file p {
|
|
text-align: center;
|
|
}
|
|
#drag_upload_file #selectfile {
|
|
display: none;
|
|
}
|
|
#oneboard {
|
|
min-height: 100px;
|
|
border: 1px solid black;
|
|
padding: 2px;
|
|
border-radius: 10px 10px 10px 10px;
|
|
}
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background-color: #dfdfdf;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<br>
|
|
|
|
<br>
|
|
|
|
<h2>MultiDrag test, for future version of <a href="https://wekan.github.io">WeKan Open Source kanban</a></h2>
|
|
|
|
<p>This MultiDrag test uses <a href="https://interactjs.io">https://interactjs.io</a> drag drop</p>
|
|
|
|
<p>Features:</p>
|
|
|
|
<ul>
|
|
<li>Newest browsers, MultiDrag: Touchscreen, you can drag many cards at once with each finger.
|
|
Use case: Many users can drag their own card at big touch screen. Or one user can drag many cards.
|
|
There is not any kanban software with MultiDrag feature yet.
|
|
</li>
|
|
<li>Ladybird, OneDrag: Touchscreen, drag only one card at once. Is it possible to get MultiDrag?</li>
|
|
<li>Legacy Browsers: Uses HTML4 tables, and GIF image for rounded corners, to be visible at Netsurf and Amiga IBrowse.
|
|
No drag drop features, so there will be buttons to move cards.
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Background GIF produces dithered background at Amiga IBrowse,
|
|
so better to use table background color to get solid color:
|
|
table background="img/round-blue.gif" => table bgcolor="#5e98c2"
|
|
But this causes card to not have rounded corners at Netsurf and Amiga IBrowse.
|
|
So, to have rounded corners at Netsurf and Amiga IBrowse, use background GIF.
|
|
|
|
valid_colors = ['white', 'green', 'yellow', 'orange', 'red', 'purple', 'blue', 'sky', 'lime', 'pink', 'black',
|
|
'silver', 'peachpuff', 'crimson', 'plum', 'darkgreen', 'slateblue', 'magenta', 'gold', 'navy',
|
|
'gray', 'saddlebrown', 'paleturquoise', 'mistyrose', 'indigo']
|
|
|
|
|
|
<table bgcolor="#5e98c2"
|
|
-->
|
|
|
|
<table bgcolor="blue" tabindex="1" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-1" class="draggable"
|
|
border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="white" face="arial">
|
|
<b>At touchscreen</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody></table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="green" tabindex="2" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-2" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="white" face="arial">
|
|
<b>Drag many at once</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody></table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="red" tabindex="3" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-3" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="white" face="arial">
|
|
<b>Visible at Netsurf</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody></table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="yellow" tabindex="4" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-4" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="black" face="arial">
|
|
<b>and Amiga IBrowse</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="gray" tabindex="5" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-5" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="white" face="arial">
|
|
<b>For all browsers</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="black" tabindex="6" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-6" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="white" face="arial">
|
|
<b>And all screen sizes</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="cyan" tabindex="7" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-7" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="black" face="arial">
|
|
<b>And all OS</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="pink" tabindex="8" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-8" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="black" face="arial">
|
|
<b>And CPUs</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="orange" tabindex="9" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-9" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="black" face="arial">
|
|
<b>At Earth</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table bgcolor="lightblue" tabindex="10" style="border-collapse: collapse;" width="200" height="80"
|
|
border="0" padding="0" spacing="0" id="drag-10" class="draggable" border-collapse="collapse">
|
|
<tbody><tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="40" valign="middle" align="top">
|
|
<font size="1" color="black" face="arial">
|
|
<b>And Space</b>
|
|
<p></p></font>
|
|
</td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
<tr border="0" padding="0" spacing="0">
|
|
<td width="20" height="20"></td>
|
|
<td width="160" height="20"></td>
|
|
<td width="20" height="20"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<div class="redlines">
|
|
<svg height="210" width="500">
|
|
<line x1="0" y1="0" x2="270" y2="150" style="stroke:rgb(255,0,0);stroke-width:2" />
|
|
</svg>
|
|
<v:group coordorigin="0 0" coordsize="500 210" style="width:500px;height:210px;">
|
|
<v:line from="0,0" to="270,150" strokecolor="red" strokeweight="2pt" />
|
|
</v:group>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// target elements with the "draggable" class
|
|
interact('.draggable')
|
|
.draggable({
|
|
// Disabled inertia, because it restricted area where to drag card,
|
|
// and returned card to wrong position.
|
|
// enable inertial throwing
|
|
//inertia: true, // This is default. Trying to disable it.
|
|
inertia: false,
|
|
// keep the element within the area of it's parent. // This is default. Trying to disable it.
|
|
/*
|
|
modifiers: [
|
|
interact.modifiers.restrictRect({
|
|
restriction: 'parent',
|
|
endOnly: true
|
|
})
|
|
],
|
|
*/
|
|
// enable autoScroll
|
|
autoScroll: true,
|
|
|
|
listeners: {
|
|
// call this function on every dragmove event
|
|
move: dragMoveListener,
|
|
|
|
// call this function on every dragend event
|
|
end (event) {
|
|
var textEl = event.target.querySelector('p')
|
|
|
|
textEl && (textEl.textContent =
|
|
'moved ' +
|
|
(Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
|
|
Math.pow(event.pageY - event.y0, 2) | 0))
|
|
.toFixed(0) + 'px from ' +
|
|
'x' + event.x0.toFixed(0) + '=>' + event.pageX.toFixed(0) +
|
|
', y' + event.y0.toFixed(0) + '=>' + event.pageY.toFixed(0));
|
|
}
|
|
}
|
|
})
|
|
|
|
function dragMoveListener (event) {
|
|
var target = event.target
|
|
// keep the dragged position in the data-x/data-y attributes
|
|
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
|
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
|
|
|
// translate the element
|
|
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
|
|
|
// update the posiion attributes
|
|
target.setAttribute('data-x', x)
|
|
target.setAttribute('data-y', y)
|
|
}
|
|
|
|
// this function is used later in the resizing and gesture demos
|
|
window.dragMoveListener = dragMoveListener
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |