Merhaba jquery draggable fonksiyonunda sürüklenen alanları nasıl sabitleyebiliriz ?
yani seçimi kaydetmek istiyorum. bunu nasıl yapabilirim ?
Merhabalar
Şu şekilde yapabilirsiniz...
Örnek adresi
http://new.cssvalley.com/ankon/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jq.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<?
if(!isSet($_COOKIE["konum"])){
$ust = "10px";
$sol = "10px";
} else {
$mesafe = explode("|", $_COOKIE["konum"]);
$ust = $mesafe[0];
$sol = $mesafe[1];
}
?>
<style>
#kim {
color: #999;
font: 20px arial;
position: absolute;
right: 10px;
top: 5px;
}
#bilgi {
color: #d75a00;
font: 22px arial;
}
#alan {
background: none repeat scroll 0 0 #333;
color: #fff;
font: 12px arial;
height: 40px;
padding: 10px;
position: absolute;
text-align: center;
width: 150px;
left:<?=$sol;?>;
top:<?=$ust;?>;
cursor:move;
}
</style>
<div id="kim">CssValley - R10</div>
<div id="bilgi"></div>
<div id="alan">
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</div>
<script>
$("#alan").draggable({
// sürüklemeye başlarken
start: function(event,ui){
$("#bilgi").hide().empty().append("Konum belirleniyor...").fadeIn();
},
// sürükleme bitince
stop: function(){
var Ust = $(this).css('top');
var Sol = $(this).css('left');
$("#bilgi").hide().empty().append("Konum kaydedildi, sayfayı yenileyin...").fadeIn();
$.cookie('konum', Ust+'|'+Sol);
}
});
</script>