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">
<title>Element both resizable and draggable gets unexpected position:absolute on resize</title>
​
<style>body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 <script src="https://gist.github.com/raw/8fbc124daa8604e191db/bed1fe9fa82ae39feacb7b53fa28878f772ebdfc/gistfile1.txt"></script> 
​
<style>
.drg { float: left; width: 100px; height: 100px; padding: 1em; border: 2px solid gray;}
</style>
​
</head>
<body>
  
  
​
  <h2>Test</h2>
  <label id="div1" class="drg">&lt;Location&gt;</label>
  <label id="div2" class="drg">&lt;Patient Name&gt;</label>
  <label id="div3" class="drg">&lt;MRN&gt;</label>
  <label id="div4" class="drg">&lt;Illness Severity&gt;</label>
  <label id="div5" class="drg">&lt;Primary Contact&gt;</label>
  <label id="div6" class="drg">&lt;Diagnosis&gt;</label>
​
</body>
</html>
​
​
 
​
 
​
​
​
​
​
​
$( "#div1" ).draggable().resizable({alwaysRelative:false});
​
$( "#div2" ).draggable().resizable({alwaysRelative:true});
$( "#div3" ).draggable().resizable({alwaysRelative:true});
​
$( "#div4" ).draggable().resizable({alwaysRelative:true});
​
$( "#div5" ).draggable().resizable({alwaysRelative:true});
​
$( "#div6" ).draggable().resizable({alwaysRelative:true});
​
​
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