jQuery draggable(); fonksiyonu

26-08-2014, 13:38:01

Merhaba jquery draggable fonksiyonunda sürüklenen alanları nasıl sabitleyebiliriz ?

yani seçimi kaydetmek istiyorum. bunu nasıl yapabilirim ?

27-08-2014, 02:11:37

#2

bilgmuh

örnek kodları ve varsa kullandığın pluginleri yazarsan yardımcı olurum

27-08-2014, 14:24:13

#3

Ankon

bilgmuh adlı üyeden alıntı: mesajı görüntüle

örnek kodları ve varsa kullandığın pluginleri yazarsan yardımcı olurum

Kodlar bu şekilde hocam,

yapmak istediğim belirlediğim alanlarda sabit kalması.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable {background:#ddd; width: 150px; height: 150px; padding: 0.5em; }
  #alan{width:800px; height:900px; border:1px solid #ddd; margin:0 auto;}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({cursor:"move", containment:"#alan"});
	$("#draggable").resizable({animate:true, ghost:true});
  });
  </script>
</head>
<body>
 

 
 <div id="alan">
 <div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
 </div>
 
</body>
</html>

28-08-2014, 10:08:37

#4

bilgmuh

Sadece Width ve Height değiştirdim.Kodlar çalışıyor
http://jsfiddle.net/03ba3meb/1/

28-08-2014, 18:06:30

#5

Ankon

bilgmuh adlı üyeden alıntı: mesajı görüntüle

Sadece Width ve Height değiştirdim.Kodlar çalışıyor
http://jsfiddle.net/03ba3meb/1/

Hocam sanırım sorunumu anlatamadım.

üzerine @bilgMuh yazdığınız kutuyu mesela sayfanın en altına sürükleyip bıraktım.

Sonrasında sayfayı yenilediğimde tekrar eski yerine geliyor.

Benim istediğim sürüklediğim öge bıraktığım yerde kalsın.

28-08-2014, 18:18:13

#6

bilgmuh

o zaman cookie kullanacaksın başka türlü olmaz
sayfanın o anki pozisyonunu cookie'ye yazdır.sayfa açılıırken cookie'den oku ona göre pozisyon uygula.

05-09-2014, 17:36:47

#7

~~CssValley~~

Üyeliği durduruldu

Ankon adlı üyeden alıntı: mesajı görüntüle

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>

05-09-2014, 19:11:14

#8

Ankon

Çok teşekkürler hocam,

kodları aldım ancak çalışmadı js kodlarını da dahil ettiğim halde.

mümkünse dosya oalrak paylaşabilir misiniz ?

CssValley adlı üyeden alıntı: mesajı görüntüle

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>

05-09-2014, 20:56:29

#9

~~CssValley~~

Üyeliği durduruldu

Pardon js leri unuttum .rar layıp atayım eve geçtiğimde.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 20:56:29 -->-> Daha önceki mesaj 19:30:20 --

Ankon adlı üyeden alıntı: mesajı görüntüle

Çok teşekkürler hocam,

kodları aldım ancak çalışmadı js kodlarını da dahil ettiğim halde.

mümkünse dosya oalrak paylaşabilir misiniz ?

http://new.cssvalley.com/ankon.rar

buyrun