title: Dragula: How to always move an item to end of list
body: <p>I am creating a drag and drop page using Dragula. It works very well. But in my case, I need move the item to the end of the list. Always.</p>
  
  <p><strong>This is my Javascript Code</strong></p>
  
  <pre><code>dragula([
          document.getElementById('left'),
          document.getElementById('right')
      ])
  
      .on('drag', function (el) {
  
          // add 'is-moving' class to element being dragged
          el.classList.add('is-moving');
          console.log(el.classList);
      })
      .on('dragend', function (el) {
  
          // remove 'is-moving' class from element after dragging has stopped
          el.classList.remove('is-moving');
  
          // add the 'is-moved' class for 600ms then remove it
          window.setTimeout(function () {
              el.classList.add('is-moved');
              window.setTimeout(function () {
                  el.classList.remove('is-moved');
              }, 600);
          }, 100);
      });
  
  
  var createOptions = (function () {
      var dragOptions = document.querySelectorAll('.drag-options');
  
      // these strings are used for the checkbox labels
      var options = ['Research', 'Strategy', 'Inspiration', 'Execution'];
  
      // create the checkbox and labels here, just to keep the html clean. append the &lt;label&gt; to '.drag-options'
      function create() {
          for (var i = 0; i &lt; dragOptions.length; i++) {
  
              options.forEach(function (item) {
                  var checkbox = document.createElement('input');
                  var label = document.createElement('label');
                  var span = document.createElement('span');
                  checkbox.setAttribute('type', 'checkbox');
                  span.innerHTML = item;
                  label.appendChild(span);
                  label.insertBefore(checkbox, label.firstChild);
                  label.classList.add('drag-options-label');
                  dragOptions[i].appendChild(label);
              });
  
          }
      }
  
      return {
          create: create
      }
  
  
  }());
  
  var showOptions = (function () {
  
      // the 3 dot icon
      var more = document.querySelectorAll('.drag-header-more');
  
      function show() {
          // show 'drag-options' div when the more icon is clicked
          var target = this.getAttribute('data-target');
          var options = document.getElementById(target);
          options.classList.toggle('active');
      }
  
  
      function init() {
          for (i = 0; i &lt; more.length; i++) {
              more[i].addEventListener('click', show, false);
          }
      }
  
      return {
          init: init
      }
  }());
  
  var leftList = document.querySelector('#left');
  var rightList = document.querySelector('#right');
  var list = document.querySelectorAll('#right li, #left li');
  var itemMoving = undefined;
  for (var i = 0; i &lt; list.length; i++) {
      list[i].addEventListener('click', function () {
          if (this.parentNode.id == 'right') {
              itemMoving = this;
              leftList.appendChild(this);
          } else {
              itemMoving = this;
              rightList.appendChild(this);
          }
  
          // add the 'is-moved' class for 600ms then remove it
          window.setTimeout(function () {
              itemMoving.classList.add('is-moved');
              window.setTimeout(function () {
                  itemMoving.classList.remove('is-moved');
              }, 600);
          }, 100);
  
      });
  }
  
  createOptions.create();
  showOptions.init();
  </code></pre>
  
  <p><a href="https://codepen.io/eduardochiletto/pen/wvBzPOJ" rel="nofollow noreferrer">This is my running code On Code Pen</a></p>