Draggable problem in Chrome and Safari

Draggable problem in Chrome and Safari

I have a problem with Chrome and Safari... tried this in IE, FF and it works fine
but in Chrome and Safari, dragging the element causes it to highlight the contents, start dragging the top image inside of the element and when I release mouse click the element follows my mouse around until i click again

my code:
  1. <style type="text/css">
  2. #container {
  3. position: absolute;
  4. top: 0;
  5. left: 0;
  6. width: 600px;
  7. height: 800px;
  8. margin-left: -150px;
  9. }
  10. #item {
  11. position: absolute;
  12. width: 300px;
  13. height: 400px;
  14. }
  15. #item img {
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. width: 100%;
  20. height: 100%;
  21. }
  22. </style>

  24. <script type="text/javascript">
  25. $(document).ready( function() {
  26.       $('#item').draggable({
  27.             cursor:               'more',
  28.             containment:      'parent'
  29.       });
  30. });
  31. </script>

  33. <div id="container">
  34.       <div id="item">
  35.             <img src="image1.jpg" />
  36.             <img src="image2.jpg" />
  37.             <img src="image3.jpg" />
  38.             <img src="image4.jpg" />
  39.             <img src="image5.jpg" />
  40.       </div>
  41. </div>