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>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
  
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
  
<title>JS Bin</title>
</head>
<body>
    <div class="tcontainer">
      <table width="90%" border="1" id="t1">
        <caption>
          Users
        </caption>
        <tr>
          <th scope="col">Firstname</th>
          <th scope="col">Lastname</th>
          <th scope="col">Username</th>
        </tr>
        <tr>
          <td>John</td>
          <td>Collins</td>
          <td>jcollins</td>
        </tr>
        <tr>
          <td>Arthur</td>
          <td>Johnson</td>
          <td>ajohnson</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Lewis</td>
          <td>mlewis</td>
        </tr>
      </table>
    </div>
<br clear=all>
<br clear=all>
<div id='drop1'>
  Drop 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  e (inline)
  </div>
  
  <div id='drop2'>
    Drop here (block)
  </div>
​
</body>
</html>
 
​
div.tcontainer {
  float: left;
  width: 50%;
}
  
div.<style>
 
div.tcontainer {
  float: left;
  width: 50%;
}
  
div.drag-row {
    width: 400px;
    background-color: #7FA5D7;
    height: 20px;
}
​
  #drop1 {display:inline-block;background:blue;padding:20px;margin:20px}
  #drop2 {display:block;background:green;padding:20px;margin:20px}
 
function setupDragDrop(source, target) {
    source.draggable({
        helper: function(event) {
            return $('<div class="drag-row"><table></table></div>')
               .find('table').append($(event.target).closest('tr').clone()).end();
        },
        appendTo: 'body'
    });
​
    target.droppable({
        drop: function(event, ui) {
            alert('row dropped ' + $(this).text());
        },
        accept: source.selector,
      tolerance: 'touch'
    });
}
​
$(function(){
  setupDragDrop($('#t1 tr'), $('#drop1, #drop2'));
});
​
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers