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
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.
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.
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 .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With