Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
  
<style>
    .ghost {
        opacity: 0.4;
    }
    .list-group {
        margin: 20px;
    }
    button {
        margin: 40px 20px;
        float: right;
    }
</style>
  
<body>
    <h4 style="margin: 20px 0">SortableJS Sandbox with jQuery SortableJS</h4>
    <p> 
        This sandbox uses the <a href="https://github.com/SortableJS/sortablejs">SortableJS</a> library 
        along with the <a href="https://github.com/SortableJS/jquery-sortablejs">jQuery SortableJS</a> binding.
        Features illustrated here are sorting, groups, the onSort event, and collecting the sorted elements in an array. 
    </p>
        Drag and drop items in each list, and drag them between lists (groups). Then click the button
        to read the order in the console.
    </p>
    <p>
        Observe that the 'toArray' function collects the 'data-id' for each element.
    <p>
        The necessary libraries are in the script tags below. In my WordPress testing environment
        jQuery 2.2.4 is required. Even though WordPress bundles jQuery, the version supplied doesn't
        seem to support the animation effects in SortableJS -- it's just very rough without jQuery
        2.2.4.
    </p>
    <div id="demo" class="row">
    <div id="items-1" class="list-group col">
        <div id="item-1.1" data-id="1.1" class="list-group-item nested-1">Item 1.1</div>
        <div id="item-1.2" data-id="1.2" class="list-group-item nested-1">Item 1.2</div>
        <div id="item-1.3" data-id="1.3" class="list-group-item nested-1">Item 1.3</div>
        <div id="item-1.4" data-id="1.4" class="list-group-item nested-1">Item 1.4</div>
        <div id="item-1.5" data-id="1.5" class="list-group-item nested-1">Item 1.5</div>
    </div>
    <div id="items-2" class="list-group col">
        <div id="item-2.1" data-id="2.1" class="list-group-item nested-1">Item 2.1</div>
        <div id="item-2.2" data-id="2.2" class="list-group-item nested-1">Item 2.2</div>
        <div id="item-2.3" data-id="2.3" class="list-group-item nested-1">Item 2.3</div>
        <div id="item-2.4" data-id="2.4" class="list-group-item nested-1">Item 2.4</div>
        <div id="item-2.5" data-id="2.5" class="list-group-item nested-1">Item 2.5</div>
    </div>
  </div>
  <button id="get-order" >Get Order</button>
​
​
  <script src="https://unpkg.com/sortablejs-make/Sortable.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
  
  
</body>
</html>
 
​
// List 1
$('#items-1').sortable({
    group: 'list',
    animation: 200,
    ghostClass: 'ghost',
    onSort: reportActivity,
});
​
// List 2
$('#items-2').sortable({
    group: 'list',
    animation: 200,
    ghostClass: 'ghost',
    onSort: reportActivity,
});
​
// Arrays of "data-id"
$('#get-order').click(function() {
    var sort1 = $('#items-1').sortable('toArray');
    console.log(sort1);
    var sort2 = $('#items-2').sortable('toArray');
    console.log(sort2);
}); 
​
// Report when the sort order has changed
function reportActivity() {
    console.log('The sort order has changed');
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
laflierpro
0viewers