Sortable #CONTROLS

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.3/Sortable.min.js"></script>
<ul id="example1">
				<li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
			</ul>
      
      <div class="assign">
      

      <ul id="example2">
				<li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
			</ul>
      <ul id="example3">
				<li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
			</ul>
            </div>

CSS

li { 
padding: 10px;
border: 1px solid #404040;
margin: 2px;
}

.assign { display: flex }

JavaScript

new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

new Sortable(example2, {
    group: 'shared', // set both lists to same group
    animation: 150
});

new Sortable(example3, {
    group: 'shared',
    animation: 150
});