ansaurus

Question

jQuery Safari/Chrome incompatibility with draggable containment property

Answer 1

+1 A:

Try replacing 'parent' with a dom object... ie, $("#divParent") and see if that works.

Plan B 2008-11-19 19:17:35

Answer 2

A:

I have the same problem. I tried replacing parent with a dom object and it didn't solve the problem. The dom object did have an affect though since the vertical dragging was now limited to a smaller area. But horizontal dragging still doesn't work.

2009-01-07 18:28:48

Answer 3

A:

I also have this problem, has anyone reported a bug?

I also have an issue with the same droppable code not working in Safari and Chrome.. there are no errors at all and the drop event is not triggered.

Jay 2009-01-23 17:03:58

Answer 4

+2 A:

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&nbsp;%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.

jacobangel 2009-01-23 21:23:15

Seems like it's more related to calculating the position than the width

yoavf 2009-01-27 14:29:22

Answer 5

A:

I am running this, it never executes the drop function in FF:

  //Draggable
  $("div.article").draggable({ helper: 'clone' });

  //Droppable box
  $("div#playlist").droppable({
   accept: "div.article",
   activeClass: 'drop-active',
   hoverClass: 'drop-hover',
   tolerance: 'touch',
   drop: function(event, ui) {
    alert("dropped");
   }
  });

Draggable html is pretty standard div boxes with headers and paragraphs inside. Droppable html is an unordered list where I want to deposit the value from the header tag that resides inside the div.

Problem I'm having is to get this to trigger but also to get the containing div as the header or p tags get in the way.

2009-02-18 11:47:37

Answer 6

A:

I had some kind of similar problem, where my draggable elements were absolutely positionned, and became relatively positionned in Chrome and Safari. Adding !important to the style position:absolute made the trick.

2009-08-25 14:45:35

Answer 7

A:

To resolve this problem, u must define WMODE diferent to transparent. I just set the wmode=window and this works fine in all browsers.

Marcus 2010-10-05 14:59:05

ansaurus

tags:

views:

answers:

jQuery Safari/Chrome incompatibility with draggable containment property

related questions