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 lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Drag and drop test with chart</title>
​
    <!-- Bootstrap latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
​
    <!-- Bootstrap optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
​
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
​
    <div class="container" style="margin-top: 100px;">
        <div id="advanced" style="margin-left: 30px;">
​
            <div style="width: 33%; float: left; margin-top: 15px; margin-left: 10px" class="panel panel-primary">
                <div class="panel-heading">Instances</div>
                <div class="panel-body">
                    <ul id="instances-list" class="list-group">
                    </ul>
                </div>
            </div>
​
            <div style="width: 33%; float: left; margin-top: 15px; margin-left: 10px" class="panel panel-primary">
                <div class="panel-heading">List of items</div>
                <div class="panel-body">
                    <ul id="main-list" class="list-group">
                        <li id="opt1" href="#" class="list-group-item" data_value="1">Opt 1</li>
                        <li id="opt2" href="#" class="list-group-item" data_value="2">Opt 2</li>
                        <li id="opt3" href="#" class="list-group-item" data_value="3">Opt 3</li>
                    </ul>
                </div>
            </div>
​
            <div style="clear: both"></div>
        </div>
    </div>
​
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Bootstrap library -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <!-- Sortable library for drag and drop lists -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.6.0/js/sortable.min.js"></script>
  </body>
</html>
 
// Create list of instances
var instances_list_element = document.getElementById("instances_list");
var instances_list = new Sortable(instances_list_element, {
  group: {name:"my_group",  pull:true, put:true},
  sort: false,
​
  // Called by any change to the list (add / update / remove)
  onSort: function (/**Event*/evt) {
      console.log('Change performed to long list');
  },
});
​
// Create main list
var main_list_element = document.getElementById("main_list");
var main_list = new Sortable(main_list_element, {
  group: {name:"my_group",  pull:'clone', put:false},
  sort: false
});
​
​
Output 300px

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

Dismiss x
public
Bin info
romanrdgzpro
0viewers