I made a solution for my problem! Yay!
I found out that inside the event 'drag' of the draggable,
I can change the top and left values of the draggable and they will
appear instantly.
here is the testing code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Draggable bounds</title>
<link type="text/css" href="theme/ui.all.css" rel="Stylesheet" />
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-
personalized-1.6rc6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#draggable1").draggable({
containment:'.container',
scroll:false,
opacity: 0.7,
stack: {group:'.container div',min: 50}
});
$("#draggable2").draggable({
scroll:false,
opacity: 0.7,
stack: {group:'.container div',min: 50},
drag: function(event, ui){
myself="#draggable2";
//get mouse axis
var xMouse = event.pageX ||
(event.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = event.pageY ||
(event.clientY +
(document.documentElement.scrollTop || document.body.scrollTop));
//get mouse axis inside the div
xMouse=xMouse-ui.position.left;
yMouse=yMouse-ui.position.top;
//get .container offsets
contMinWidth=$('.container').offset().left;
contMaxWidth=$('.container').width()+contMinWidth;
contMinHeight=$('.container').offset().top;
contMaxHeight=$('.container').height()+contMinHeight;
//if the cursor tries to get outside
from the bottom
if(ui.position.top+yMouse>contMaxHeight)
//stop it there
ui.position.top=contMaxHeight-yMouse;
//if the cursor tries to get outside
from the top
else
if(ui.position.top+yMouse<contMinHeight)
//stop it there
ui.position.top=contMinHeight-yMouse;
//if the cursor tries to get outside
from the right
if(ui.position.left+xMouse>contMaxWidth)
//stop it there
ui.position.left=contMaxWidth-xMouse;
//if the cursor tries to get outside
from the left
else
if(ui.position.left+xMouse<contMinWidth)
//stop it there
ui.position.left=contMinWidth-xMouse;
}
});
});
</script>
<style>
.container{
background:#F6A828;
width:500px;
height:400px;
margin:50px;
}
#draggable1,#draggable2{
background:#EEEEEE;
border:1px solid #DDDDDD;
width:150px;
height:100px;
}
</style>
</head>
<body>
<div class="container" class="ui-widget-content">
<div id="draggable1" class="ui-widget-content">
<p>I'm draggable only inside the container</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>I'm draggable outside the container with restrictions</p>
</div>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
