Skip to content
Related Articles

Related Articles Sorting dropOnEmpty Option

View Discussion
Improve Article
Save Article
  • Last Updated : 27 Nov, 2020

The dropOnEmpy option in the Sortable module allows sortable elements to be dropped onto another list. Its default value is false.


Sortable.create(List1_id, {containment: [List1_id, List2_id], dropOnEmpty: true});
Sortable.create(List2_id, {containment: [List1_id, List2_id], dropOnEmpty: true});


<!DOCTYPE html>
    <script type="text/javascript" 
    <script type="text/javascript" 
        window.onload = function () {
            Sortable.create('List1', {
                containment: ['List1', 'List2'],
                dropOnEmpty: true
            Sortable.create('List2', {
                containment: ['List1', 'List2'],
                dropOnEmpty: true
    <style type="text/css">
        li {
            cursor: move;
        ul {
            width: 80px;
            padding: 5px 5px 5px 20px;
    <div style="float:left">
        <ul id="List1">
    <div style="float:left;margin-left:30px">
        <ul id="List2">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!