Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 972
user37122 Avatar asked Nov 12 '08 21:11

user37122


People also ask

Why is draggable not working?

Check whether your draggable object is already loaded in the viewport. If it is not, it won't work properly. JUST AFTER the draggable object to be absolutely sure that everything is loaded at the correct time.

What is jQuery draggable?

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.

How do you make something draggable in jQuery?

Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .

How do I limit draggable area in HTML?

Limit draggable area using 'containment' option It is simple. All you have to do is, add an option called containment to the draggable() method. The containment option has a value parent.


2 Answers

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

like image 114
anjalis Avatar answered Sep 22 '22 16:09

anjalis


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.

like image 43
nathanlampe Avatar answered Sep 20 '22 16:09

nathanlampe