mirrors
/
wekan
mirror of https://github.com/wekan/wekan.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<!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>