Skip to content
Related Articles

Related Articles

Improve Article
script.aculo.us Sorting dropOnEmpty Option
  • 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.

Syntax:

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

Example:




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="./javascript/prototype.js">
    </script>
  
    <script type="text/javascript" 
        src="./javascript/scriptaculous.js">
    </script>
      
    <script>
        window.onload = function () {
  
            Sortable.create('List1', {
                containment: ['List1', 'List2'],
                dropOnEmpty: true
            });
  
            Sortable.create('List2', {
                containment: ['List1', 'List2'],
                dropOnEmpty: true
            });
        }
    </script>
  
    <style type="text/css">
        li {
            cursor: move;
        }
  
        ul {
            width: 80px;
            padding: 5px 5px 5px 20px;
        }
    </style>
</head>
  
<body>
    <div style="float:left">
        <h3>List-1</h3>
        <ul id="List1">
            <li>tag</li>
            <li>containment</li>
            <li>script</li>
            <li>empty</li>
        </ul>
    </div>
  
    <div style="float:left;margin-left:30px">
        <h3>List-2</h3>
        <ul id="List2">
            <li>aculo</li>
            <li>us</li>
            <li>drag</li>
            <li>empty</li>
        </ul>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :