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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title></title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
​
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
​
</head>
<body style="background-color:Yellow">
  <form id="form1" runat="server">
  <table border="1" width="100%" style="height:500px;">
    <tr>
      <td width="10%" style="padding-left:50px;">
        <div id="divDropBox1">
          <table>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 1
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 2
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 3
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 4
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 5
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 6
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 7
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 8
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 9
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 10
              </td>
            </tr>
          </table>
        </div>
      </td>
      <td style="width:1%">&nbsp;</td>
      <td align="center">
        <table>
          <tr style="background-color:Gray">
            <td draggable="1">
             <table><tr><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="300">Record 1</td><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>
            </td>
          </tr>
          <tr style="background-color:#EFEFEF">
            <td draggable="1" style="width:300px;height:50px">
              <table><tr><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="300">Record 2</td><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>
            </td>
          </tr>
          <tr style="background-color:Gray">
            <td draggable="1" style="width:300px;height:50px">
              <table><tr><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="300">Record 3</td><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>
            </td>
          </tr>
          <tr style="background-color:#EFEFEF">
            <td draggable="1" style="width:300px;height:50px">
              <table><tr><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="300">Record gauri</td><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>
            </td>
          </tr>
          <tr style="background-color:Gray">
            <td draggable="1" style="width:300px;height:50px">
              <table><tr><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td width="300">Record 5</td><td style="background-color:Blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>
            </td>
          </tr>
        </table>
      </td>
      <td style="width:1%">&nbsp;</td>
      <td style="padding-right:50px;" align="right">
         <div id="div1">
          <table>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 1
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 2
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 3
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 4
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 5
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 6
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 7
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 8
              </td>
            </tr>
            <tr style="background-color:green">
              <td dropable="1" style="height: 20px;">
                Dropbox 9
              </td>
            </tr>
            <tr style="background-color:Aqua">
              <td dropable="1" style="height: 20px;">
                Dropbox 10
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
  </form>
  <script type="text/javascript" language="javascript">
    $(document).ready(function() {
      $("[draggable='1']").draggable({
        //containment: 'body',
        //appendTo:'body',
        opacity: 1,
        //cursorAt: { right: -20, bottom: -2 },
        revert: 'invalid',
        zIndex: 10000,
        refreshPositions: true,
        scroll: true,
        //handle: "[move='1']",
        addClasses: true,
        helper: 'clone',
        cursor: 'move',
        start: function(event, ui) {
          makeDroppable();
        },
        stop: function(event, ui) { }
      });
    });
    function makeDroppable() {
      $("[dropable='1']").droppable({
        tolerance: 'touch',
        addClasses: false,
        drop:
          function(e, ui) {
        alert("dropped on " + $(this).html());
          },
        activate: function(event, ui) { },
        over: 
          function(e, ui) {
        alert("dropped on " + $(this).html());
          },
        out: function(event, ui) { }
      });
    }
  </script>
​
</body>
</html>
​
​
 
​
​
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