Dragula
Dragula is a pure JavaScript plugin that converts the div or list where the users are able to move options between two selection panels.
For more info please visit the plugin's GitHub..
Basic Dragula with div
We need to move div options between these two containers.
You can move these elements between these two containers.
Moving them anywhere else isn't quite possible.
Anything can be moved around.
More interactive use cases lie ahead.
There's also the possibility of moving elements around in the same container, changing their position.
This is the default use case. You only need to specify the containers you want to use.
Moving input elements works just fine. You can still focus them, too.
Code Example
<div id="basicLeft" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">You can move these elements between these two containers.</div> <div class="p-3 bg-white border border-light round-lg">Moving them anywhere else isn't quite possible.</div> <div class="p-3 bg-white border border-light round-lg">Anything can be moved around.</div> <div class="p-3 bg-white border border-light round-lg">More interactive use cases lie ahead.</div> </div> <div id="basicRight" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">There's also the possibility of moving elements around in the same container, changing their position.</div> <div class="p-3 bg-white border border-light round-lg">This is the default use case. You only need to specify the containers you want to use.</div> <div class="p-3 bg-white border border-light round-lg">Moving <code>input</code> elements works just fine. You can still focus them, too. </div> </div>
Basic Dragula with list
We need to move list options between these two containers.
- You can move these elements between these two containers.
- Moving them anywhere else isn't quite possible.
- Anything can be moved around.
- More interactive use cases lie ahead.
- There's also the possibility of moving elements around in the same container, changing their position.
- This is the default use case. You only need to specify the containers you want to use.
- Moving input elements works just fine. You can still focus them, too.
Code Example
<ul id="basicLeftList" class="dragula-container card card-bordered p-4 h-100"> <li class="p-3 bg-white border border-light round-lg">You can move these elements between these two containers.</li> <li class="p-3 bg-white border border-light round-lg">Moving them anywhere else isn't quite possible.</li> <li class="p-3 bg-white border border-light round-lg">Anything can be moved around.</li> <li class="p-3 bg-white border border-light round-lg">More interactive use cases lie ahead.</li> </ul> <ul id="basicRightList" class="dragula-container card card-bordered p-4 h-100"> <li class="p-3 bg-white border border-light round-lg">There's also the possibility of moving elements around in the same container, changing their position.</li> <li class="p-3 bg-white border border-light round-lg">This is the default use case. You only need to specify the containers you want to use.</li> <li class="p-3 bg-white border border-light round-lg">Moving <strong>input</strong> elements works just fine. You can still focus them, too. </li> </ul>
Theme Dragula
Drag options and move between these two containers & moving option getting theme color.
As soon as you start dragging an element, a drag event is fired
The shadow event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position
Event is fired whenever an element is dropped anywhere other than its origin
A cancel event is fired when an element would be dropped onto an invalid target, but retains its original placement instead
The code event fires when you drag something over a container
Lastly a dragend regardless of whether it ends in a cancellation, removal, or drop
Code Example
<div id="themeLeft" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">As soon as you start dragging an element, a <code>drag</code> event is fired</div> <div class="p-3 bg-white border border-light round-lg">The <code>shadow</code> event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position</div> <div class="p-3 bg-white border border-light round-lg">Event is fired whenever an element is dropped anywhere other than its origin </div> </div> <div id="themeRight" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">A <code>cancel</code> event is fired when an element would be dropped onto an invalid target, but retains its original placement instead</div> <div class="p-3 bg-white border border-light round-lg">The <code>code</code> event fires when you drag something over a container </div> <div class="p-3 bg-white border border-light round-lg">Lastly a <code>dragend</code> regardless of whether it ends in a cancellation, removal, or drop</div> </div>
Remove-Spill
If you want to remove option when it spills out of the chosen containers, you can easily sort the items in any containers by just dragging and dropping.
Moving them anywhere else isn't quite possible.
Anything can be moved around. You can still move them, too.
More interactive use cases lie ahead.
Event is fired whenever an element is dropped anywhere other than its origin
This is the default use case. You only need to specify the containers you want to use.
Moving input elements works just fine. You can still focus them, too.
As soon as you start dragging an element, a drag event is fired
Anxious Cab Driver
Code Example
<div id="removeSpillLeft" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">Moving them anywhere else isn't quite possible.</div> <div class="p-3 bg-white border border-light round-lg">Anything can be moved around. You can still move them, too.</div> <div class="p-3 bg-white border border-light round-lg">More interactive use cases lie ahead.</div> <div class="p-3 bg-white border border-light round-lg">Event is fired whenever an element is dropped anywhere other than its origin </div> </div> <div id="removeSpillRight" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">This is the default use case. You only need to specify the containers you want to use.</div> <div class="p-3 bg-white border border-light round-lg">Moving <code>input</code> elements works just fine. You can still focus them, too. </div> <div class="p-3 bg-white border border-light round-lg">As soon as you start dragging an element, a <code>drag</code> event is fired</div> <div class="p-3 bg-white border border-light round-lg">Anxious Cab Driver</div> </div>
Not Remove-Spill Both
By default, dropping an element outside of any known containers will keep the element. It cann't be remove from container when dropping outside.
When that happens, a cencel event will be raised
Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers
Moving items between containers works as usual
This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises
If you try to drop an item outside of any containers, though, it'll retain its original position
Terrible Comedian
Code Example
<div id="not-removeSpillLeft" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">When that happens, a <code>cencel</code> event will be raised</div> <div class="p-3 bg-white border border-light round-lg">Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers</div> <div class="p-3 bg-white border border-light round-lg">Moving items between containers works as usual</div> </div> <div id="not-removeSpillRight" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises</div> <div class="p-3 bg-white border border-light round-lg">If you try to drop an item outside of any containers, though, it'll retain its original position</div> <div class="p-3 bg-white border border-light round-lg">Terrible Comedian</div> </div>
Copy Spill Both
Copying option from one container to another, so that it can be copied from both side without remove.
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead
More interactive use cases lie ahead
When elements are copyable, they can't be sorted in their origin container
Whenever that happens, a cloned event is raised
Note that the clones get destroyed if they're not dropped into another container
Code Example
<div id="both-copySpillLeft" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.</div> <div class="p-3 bg-white border border-light round-lg">Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead</div> <div class="p-3 bg-white border border-light round-lg">More interactive use cases lie ahead</div> </div> <div id="both-copySpillRight" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg">When elements are copyable, they can't be sorted in their origin container</div> <div class="p-3 bg-white border border-light round-lg">Whenever that happens, a <code>cloned</code> event is raised</div> <div class="p-3 bg-white border border-light round-lg">Note that the clones get destroyed if they're not dropped into another container</div> </div>
Copy Spill Aside
Copying option from aside, so that it can be copied from one side without remove.
When elements are copyable, they can't be sorted in their origin container
Note that the clones get destroyed if they're not dropped into another container
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
Copying prevents original elements from being dragged.
Code Example
<div id="aside-copySpillLeft" class="dragula-container card card-bordered p-4"> <div class="p-3 bg-white border border-light round-lg">When elements are copyable, they can't be sorted in their origin container</div> <div class="p-3 bg-white border border-light round-lg">Note that the clones get destroyed if they're not dropped into another container</div> <div class="p-3 bg-white border border-light round-lg">You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.</div> <div class="p-3 bg-white border border-light round-lg">Copying prevents original elements from being dragged. </div> </div> <div id="aside-copySpillRight" class="dragula-container card card-bordered p-4 h-100"></div>
Drag Handle
Drag with handles to copy option from one container to another.
Note that the dragged element will go back to the place you originally dragged it
Moving items between containers works as usual
When that happens, a cancel event will be raised
This is useful if you want to ensure drop events only happen when the user intends
Terrible Comedian
If you try to drop an item outside of any containers
Code Example
<div id="dragHandleLeft" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg round-lg dragula-handle"> <span class="handle"></span> <span>Note that the dragged element will go back to the place you originally dragged it </span> </div> <div class="p-3 bg-white border border-light round-lg round-lg dragula-handle"> <span class="handle"></span> <span>Moving items between containers works as usual</span> </div> <div class="p-3 bg-white border border-light round-lg round-lg dragula-handle"> <span class="handle"></span> <span>When that happens, a <code>cancel</code> event will be raised</span> </div> </div> <div id="dragHandleRight" class="dragula-container card card-bordered p-4 h-100"> <div class="p-3 bg-white border border-light round-lg round-lg dragula-handle"> <span class="handle"></span> <span>This is useful if you want to ensure drop events only happen when the user intends</span> </div> <div class="p-3 bg-white border border-light round-lg round-lg dragula-handle"> <span class="handle"></span> <span>Terrible Comedian</span> </div> <div class="p-3 bg-white border border-light round-lg round-lg dragula-handle"> <span class="handle"></span> <span>If you try to drop an item outside of any containers</span> </div> </div>
Drag Container
Single option drag in up-down one container to another. No extra configuration is necessary.
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead
More interactive use cases lie ahead
When elements are copyable, they can't be sorted in their origin container
Whenever that happens, a cloned event is raised
Code Example
<div id="dragContainer" class="dragula-container card card-bordered p-4"> <div class="p-3 bg-white border border-light round-lg">You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.</div> <div class="p-3 bg-white border border-light round-lg">Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead</div> <div class="p-3 bg-white border border-light round-lg">More interactive use cases lie ahead</div> <div class="p-3 bg-white border border-light round-lg">When elements are copyable, they can't be sorted in their origin container</div> <div class="p-3 bg-white border border-light round-lg">Whenever that happens, a <code>cloned</code> event is raised</div> </div>
