jQuery Safari/Chrome incompatibility with draggable containment property
the solution i found is to set the element position: absolute !important, :))
anjalis was right,
position: absolute !important;worked perfectly for me. I was having a small issues of the draggable element slightly popping out of the container when you released and click on the element. it would offset slight. with position: absolute !important and the parent element position: relative; it worked like a charm.
Try wrapping the divParent div with another div,and then setting containment to the div wrapping divParent while injecting it into divParent. This worked for me:
<script> function newDiv() { var divs = $(unescape('%3Cdiv class="divNew" style=""%3E %3C/div%3E')); divs.draggable( { containment: $('#a') }); $('#divParent').append(divs); } </script></head><body> <style> .divNew {width: 50px; height: 50px;border: solid 1px; background: Red;} #divParent {width: 500px; height: 500px; border: solid 1px;}; </style> <a href="javascript:;" onclick="newDiv()">new div</a> <div id="a"> <div id="divParent" style=""> <!--<div class="divNew"></div>--> </div> </div></body>EDIT: I just realized this doesn't work completely. You should include a check to see if the browser is webkit based, and then set the container to 1000px instead of 500px. The bug seems to be, obviously, related to calculating the width properly.