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/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<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.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #ct { width:10; height:10; padding:10px; border:1px solid #000;}
  #icon { width:100; height:50; padding:10px; border:1px solid #000; }
</style>
</head>
  <body style="width:100%;height:100%;">
  
  <div style="position:absolute; top:20px; left:10px;">
    <div id="icon">Icon</div>
  </div>
  
  <div style="position:absolute; top:20px; left:200px;">
    <div id="ct">start this drag when you drag the icon</div>
  </div>
    
  
  <div id="dropHere" style="width:300px; height:300px; position:absolute; left:25%; top:25%; background-color:#cacaca;"> 
    
    <div style="width:10; height:10; padding:10px; border:1px solid #000;">
       <div id="ct1">sortable 1</div>
    </div>      
    
    <div style="width:10; height:10; padding:10px; border:1px solid #000;">
       <div id="ct2">sortable 2</div>
    </div>
    
    <div style="width:10; height:10; padding:10px; border:1px solid #000;">
       <div id="ct3">sortable 3</div>
    </div>
    
  </div>
​
  
</body>
</html>
 
$(document).ready(function()
{
  
  $('#icon').mousedown(function(b) {
    var startX = b.pageX;
    var startY = b.pageY;
    var startCtX = parseInt($("#ct").parent().css("left"));
    var startCtY = parseInt($("#ct").parent().css("top"));
    
    $("html").mousemove(function(m) {
        $("#ct").parent().css("left", (m.pageX - startX + startCtX) + "px");
        $("#ct").parent().css("top", (m.pageY - startY + startCtY) + "px");
    }).mouseup(function() {
        $("html").unbind("mousemove");
    });
  });
  
​
  
     $('#dropHere').sortable(
     {
​
       receive: function(event, ui)
       {
​
       }
​
     });
​
  $('#ct').draggable({
  
           connectToSortable: '#dropHere'
  });
  
  
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers