SORU : div içinde div

18-11-2016, 16:39:58

Merhaba 400x400 bir div içinde 1600x1600 div oluşturup, içindeki divi mouse ile sürüklenebilir yapmak istiyorum. Bunun için bir öneriniz var mı? Böyle bir yöntem var mı?

18-11-2016, 16:49:47

#2

grafiemo

Kimlik doğrulama veya yönetimden onay bekliyor.

Senin için bir örnek yaptım hocam mutlaka yararı olacaktır.

http://codepen.io/eozgilik/pen/pNRzbb

18-11-2016, 16:50:41

#3

PixelTasarim

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

Merhaba 400x400 bir div içinde 1600x1600 div oluşturup, içindeki divi mouse ile sürüklenebilir yapmak istiyorum. Bunun için bir öneriniz var mı? Böyle bir yöntem var mı?

http://www.w3schools.com/css/tryit.a...ayout_float_ex burayı incele belki fikir edinebilirsin.
Sürükleme işlemi hakkında ise burayı bir incele: http://www.w3schools.com/html/html5_draganddrop.asp

18-11-2016, 17:04:23

#4

sistemweb

ilgin için teşekkürler ama onları inceledim daha önce benim soruma yanıt değiller malesef...

18-11-2016, 17:08:11

#5

grafiemo

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

ilgin için teşekkürler ama onları inceledim daha önce benim soruma yanıt değiller malesef...

Benim gönderdiğim senin soruna yanıt mı ? Eğer değilse soru yanlış

18-11-2016, 17:15:21

#6

sistemweb

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

Benim gönderdiğim senin soruna yanıt mı ? Eğer değilse soru yanlış

Hocam tamda istediğim o işte fakat üzülerek belirtmeliyimki o kısma kadar bendede tamam ama ben limitleri olsun istiyorum. Yani o resim bitince daha fazla gitmesin mesela dursun bu mümkün mü? Eğer bu konudada destek olursanız yaptığım kodu size ileteceğim. Amacı ile birlikte... Komplike bir yapıyı basitleştirmeye çalışıyorum da

18-11-2016, 17:52:01

#7

grafiemo

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

Hocam tamda istediğim o işte fakat üzülerek belirtmeliyimki o kısma kadar bendede tamam ama ben limitleri olsun istiyorum. Yani o resim bitince daha fazla gitmesin mesela dursun bu mümkün mü? Eğer bu konudada destek olursanız yaptığım kodu size ileteceğim. Amacı ile birlikte... Komplike bir yapıyı basitleştirmeye çalışıyorum da

Beynim yandı

ama oldu sanırım

http://codepen.io/eozgilik/pen/pNRzbb

19-11-2016, 00:27:45

#8

sistemweb

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

Beynim yandı

ama oldu sanırım

http://codepen.io/eozgilik/pen/pNRzbb

Mükemmel iş hocam eline sağlık. pm atıyorum yapmak istediğim olayı...

19-11-2016, 01:44:03

#9

codeksper

5 dakkada yaparız n'olcak diye başladım da baya vaktimi yedi, pişman olmadım değil hani

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>CODEKSPER</title>
	<style type="text/css">
	body{padding:0;margin:0;}
	#a{ position:relative;width:1000px;height:600px;margin:0 auto;background:#000; }
	#b{ position:absolute;z-index:1;left:0;top:0;width:200px;height:50px;background:#ffff00;font-weight:bold;line-height:50px;text-align:center;}
	</style>
</head>
<body>
	
	<div id="a">
		<div id="b"></div>
	</div>
	
	<script type="text/javascript">
	var a = document.getElementById("a");
	var b = document.getElementById("b");
	var a_w = a.clientWidth;
	var a_h = a.clientHeight;
	var b_w = b.clientWidth;
	var b_h = b.clientHeight;
	b.innerHTML = "CODEKSPER";
	var left_space=0,top_space=0;
	b.onmousedown = function(e){
		var xStart 			= e.pageX;
		var yStart 			= e.pageY;
		var lsOld 			= left_space;
		var tsOld 			= top_space;
		var ls,ts;
		document.onmousemove = function(e){
			xEnd = e.pageX;
			yEnd = e.pageY;
			ls = (xEnd-xStart)+lsOld;
			ts = (yEnd-yStart)+tsOld;
			if( ls < 1 ){ ls = 0; }else if( ls >= (a_w-b_w) ){ ls = a_w-b_w; }
			if( ts < 1 ){ ts = 0; }else if( ts >= (a_h-b_h) ){ ts = a_h-b_h; }
			left_space = ls;
			top_space = ts;
			b.style.left=ls+"px";
			b.style.top=ts+"px";
		}
		document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null; }
	}
	</script>
	
</body>
</html>

---------------

EDIT:

400x400 bir div içinde 1600x1600 kısmında anlatılanın tam tersini anlamışım. Yine de de kod üstünde biraz matematik pratiği yaparsanız sorun çözülür.

Kolay gelsin.