Dragula choose

by amindunited

HTML

<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css"/>
<main>
  <div class="page">
    <div>
      <ul class="scripts">
        <li>Script One</li>
        <li>Script Two</li>
        <li>Script Three</li>
        <li>Script Four</li>
      </ul>
    </div>
    <div>
      <ul class="projects">
        <li>Proj One</li>
        <li>Proj Two</li>
        <li>Proj Three</li>
        <li>Proj Four</li>
        <li>Proj Five</li>
        
      </ul>
    </div>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>

CSS

.page {
  display: flex;
  max-width: 1024px;
}

JavaScript

dragula([
	document.querySelector('ul.scripts'),
  document.querySelector('ul.projects')
], {
	copy: function (el, source) {
  	console.log('copy...', source, source.className != 'scripts');
  	return source.className === 'source';
    // return false;
	},
  accepts: function (el, target, source, sibling) {
		/*
		console.log('target ', target);
    if (target === document.querySelector('ul.scripts')) {
    	return false;
    }
    */
    return true;
  }
});
/*
{
  isContainer: function (el) {
    return false; // only elements in drake.containers will be taken into account
  },
  moves: function (el, source, handle, sibling) {
    return true; // elements are always draggable by default
  },
  accepts: function (el, target, source, sibling) {
    return true; // elements can be dropped in any of the `containers` by default
  },
  invalid: function (el, handle) {
    return false; // don't prevent any drags from initiating by default
  },
  direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
  copy: false,                       // elements are moved by default, not copied
  copySortSource: false,             // elements in copy-source containers can be reordered
  revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
  removeOnSpill: false,              // spilling will `.remove` the element, if this is true
  mirrorContainer: document.body,    // set the element that gets mirror elements appended
  ignoreInputTextSelection: true     // allows users to select input text, see details below
}
*/