CODEWITHSUNDEEP
jqueryjquery-uisafarigoogle-chromedraggable
user37122
user37122

Reputation: 121

jQuery Safari/Chrome incompatibility with draggable containment property

This code works in Firefox, Internet Explorer, not in Safari/Chrome:

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script>
        function newDiv() {
            var div = $('<div id="divNew" style="width: 50px; height: 50px; border: solid 1px; background: Red"></div>');
            $('#divParent').append(div);
            div.draggable(
            {
                containment: 'parent'
            });
        }
    </script>
</head>
<body>
    <a href="javascript:;" onclick="newDiv()">new div</a>
    <div id="divParent" style="width: 500px; height: 500px; border: solid 1px;"></div>
</body>

In Safari/Chrome, the divNew can only be moved vertically. jQuery's this feature is currently incompatible? I am using 1.5.2 stable version.It can be found here jQuery 1.5.2

Upvotes: 12

Views: 14404

Answers (7)

anjalis
anjalis

Reputation: 111

the solution i found is to set the element position: absolute !important, :))

Upvotes: 11

Marcus
Marcus

Reputation: 1

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

Upvotes: 0

nathanlampe
nathanlampe

Reputation: 31

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.

Upvotes: 3

Anes
Anes

Reputation: 35

Jquery UI Draggable method will not Work in Safari and MAC OS X environment any way. So when write code consider same like:

if(!($browser.safari && navigator.appVersion.indexOf('Mac')!= -1)) {
    $('div.urid').draggable({
        helper: 'clone',
        opacity: 0.4
    });
}

When you implement Drag and Drop pls consider same...

Upvotes: 1

user162806
user162806

Reputation: 21

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.

Upvotes: 2

jacobangel
jacobangel

Reputation: 6996

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.

Upvotes: 2

Bryan A
Bryan A

Reputation: 3634

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

Upvotes: 1

Related Questions