• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

draggable dynamische erweiterung nach links ok, aber nach rechts probleme

H

hotte83

New member
hallo, ich habe vor eine kleine karte zu basteln, aber tu mich irgendwie schon schwer mit nachladen nur auf der x-achse.
habs bis jetzt versucht erstmal irgendwie mit draggable zu meistern. verschiebt man den berreich von rechts nach links, gehts auch so wie ich mir das
vorgestellt habe, aber von links nach rechts gibts probleme. theoretisch gehts, aber praktisch siehts so aus, das sich die tiles um 1 verschieben, da ich einen neuen ganz links anhänge. soll halt so sein das sich nichts verschiebt. hoffe ihr wisst was ich meine.
vielleicht ist der ansatz ne karte mit draggable zu erstellen auch grundlegen falsch? der blaue fixed berreich soll sozusagen der sichtberreich sein. wäre cool wenn mir jemand helfen könnte, oder mich auf den richtigen weg bringen könnte:)

hier erstmal der code

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
 #maincon {
	width: 550px;
	height:50px;
	border: 2px solid #00F;
	margin-top: 200px;
	margin-left: 300px;
	position: fixed;
}
 #seewin {
	width: 150px;
	height:54px;
	position: fixed;
	margin-top: 200px;
	margin-left: 502px;
	background-color: #09C;
	z-index: 1;
	opacity:0.7;
}

#draggable {
	height: 48px;
	width: 350px;
	left: 100px;
	border: thin solid #930;
}
#tile1,#tile2,#tile3,#tile4,#tile5,#tile6,#tile7{
	height: 46px;
	width: 48px;
	float:left;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #F00;
	border: 1px solid #000;
	left: 0px;
}

#tile8,#tile9,#tile10{
	height: 46px;
	width: 48px;
	float:left;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #00F;
	border: 1px solid #000;
	left: 700px;
	display: none;
}
#tile0{
	height: 46px;
	width: 48px;
	float:left;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #00F;
	border: 1px solid #000;
	display: none;
}

 #info {
	background-color: #000;
	height: 40px;
	width: 80px;
	position: fixed;
	left: 0px;
	top: 0px;
	color: #FFF;
	padding: 5px;
}

</style>
<script>
 $(document).ready(function()
{
var a = 0;
 $(document).mousemove(function(e){
      $('#info1').html(e.pageX +', '+ e.pageY);
      var offset = $('#draggable').offset();
      $('#info2').text(offset.left + ", " +offset.top);
	  
	  if(offset.left <360 && a == 0)
	{
		$("#maincon").css("margin-left", "250px");
		$("#maincon").css("width", "650px");
		$("#draggable").css("width", "400px");
		$("#tile8").show();
		 a = 1;
	
	}
 if(offset.left <310 && a == 1)
	{
		$("#maincon").css("margin-left", "200px");
		$("#maincon").css("width", "750px");
		$("#draggable").css("width", "450px");
		$("#tile9").show();
		a = 2;
	
	}
 if(offset.left <260 && a == 2)
	{
		$("#maincon").css("margin-left", "150px");
		$("#maincon").css("width", "850px");
		$("#draggable").css("width", "500px");
		$("#tile10").show();
		a = 3;
	
	}

 if(offset.left >460 && a == 0)
	{
		//$("#maincon").css("margin-left", "250px");
		$("#maincon").css("width", "600px");
		$("#draggable").css("width", "400px");
		$("#tile0").show();
		a = 0;
	
	}

 });
	
	
	$('#draggable').draggable( {containment: '#maincon', cursor: 'move'});


});
   
</script>
</head>
<body>
 <div id="seewin"> </div> 
    <div id="maincon">
        <div id="draggable">
         <div id="tile0">0</div>
         <div id="tile1">1</div>
         <div id="tile2">2</div>
         <div id="tile3">3</div>
         <div id="tile4">E</div>
         <div id="tile5">5</div>
         <div id="tile6">6</div>
         <div id="tile7">7</div>
        <div id="tile8">8</div>
        <div id="tile9">9</div>
        <div id="tile10">10</div>
        </div> 
</div> 
<div id="info"> <div id="info1"></div> <div id="info2"></div></div> 
</body>
</html>
 
Ich weiß nicht, ob das mit dem Dragable geht, aber du musst hald die Position des #draggable nach links verschieben, wenn du links ein Element einfügst, damit die anderen Elemente an der gleichen Stelle bleiben.
 
Ja, sowas ist mir natürlich auch in den sinn gekommen und habs damit auch schon probiert. Theoretisch gehts, problem ist bloß, dass man während des draggens dann mit extremen stoterreien zu tun hat. Wenn ich jetzt also sage setz bei offset.left > 460 den draggable container -50 left von aktueller left position hat das son unschönen jump effekt. Mir geht dabei die geschmeidigkeit verloren die ich zb von rechts nach links habe.
gibts vllt noch andere ideen?
 
danke dir erstmal für den hinweiß julian. habs sonst immer von meinem eigenen server geladen.
hier hab ichs nur so verlinkt, damit sich jeder per copy paste anschauen kann, was gemeint ist.

habs jetzt erstmal so hinbekommen, ohne das es skalierbar ist bzw in kombination mit beiden richtungen geht, aber das kommt noch. komischer weiße hab ich gestern genau den gleichen ansatz gehabt, hat aber irgendwie nicht funktioniert. zum glück hat mich julian nochmal drauf aufmerksam gemacht.

ich mach es jetzt so das bei verschieben der letzte container im width reduziert wird bis er <1 hat und dann wird er gehidet. auf der anderen seite show ich den div und fang an ihn zu vergrößern bis er max größe besitzt. das läuft soweit alles ganz geschmeidig ab. könnt ja selbst mal schauen. hier der code. für weitere anregungen bin ich natürlich offen:)

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
 #maincon {
	width: 550px;
	height:50px;
	border: 2px solid #00F;
	margin-top: 200px;
	margin-left: 300px;
	position: fixed;
}
 #seewin {
	width: 150px;
	height:54px;
	position: fixed;
	margin-top: 200px;
	margin-left: 502px;
	background-color: #09C;
	z-index: 1;
	opacity:0.7;
}

#draggable {
	height: 48px;
	width: 350px;
	left: 100px;
	border: thin solid #930;
}
#tile1,#tile2,#tile3,#tile4,#tile5,#tile6,#tile7{
	height: 48px;
	width: 50px;
	float:left;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #F00;
	left: 0px;
}

#tile8,#tile9,#tile10{
	height: 48px;
	width: 0px;
	float:left;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #00F;
	left: 700px;
	display: none;
}
#tile0{
	height: 48px;
	width: 0px;
	float:left;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	background-color: #00F;
	display: none;
}

 #info {
	background-color: #000;
	height: 60px;
	width: 80px;
	position: fixed;
	left: 0px;
	top: 0px;
	color: #FFF;
	padding: 5px;
}

</style>
<script>
 $(document).ready(function()
{
var a = 0;
 $(document).mousemove(function(e){
      $('#info1').html(e.pageX +', '+ e.pageY);
      var offset = $('#draggable').offset();
      $('#info2').text(offset.left + ", " +offset.top);
	  
	  var dragl = $('#draggable').css("left");
	$('#info3').text(dragl);

	
	 if(offset.left <410 && a == 0)
	{
		
		var nwidth =  50 - (410-offset.left);
		$("#tile1").css( "width", nwidth+"px" );
		if(nwidth < 1)
		$("#tile1").hide();
		
		
		$("#tile8").show();
		
		var nwidth2 =  0 + (410-offset.left);
		if(nwidth2 <50){nwidth2 = nwidth2}
		else{nwidth2 =  50}
		$("#tile8").css( "width", nwidth2+"px" );

	}
	
	 if(offset.left >410 && a == 0)
	{
		
		var nwidth =  50 - (offset.left-410);
		$("#tile7").css( "width", nwidth+"px" );
		if(nwidth < 1)
		$("#tile7").hide();
		
		$("#tile0").show();
		
		var nwidth2 =  0 + (offset.left-410);
		if(nwidth2 <50){nwidth2 = nwidth2}
		else{nwidth2 =  50}
		$("#tile0").css( "width", nwidth2+"px" );

	}

 });
	
	$('#draggable').draggable( {containment: '#maincon', cursor: 'move'
	});


});
   
</script>
</head>
<body>
 <div id="seewin"> </div> 
    <div id="maincon">
        <div id="draggable">
         <div id="tile0">0</div>
         <div id="tile1">1</div>
         <div id="tile2">2</div>
         <div id="tile3">3</div>
         <div id="tile4">E</div>
         <div id="tile5">5</div>
         <div id="tile6">6</div>
         <div id="tile7">7</div>
        <div id="tile8">8</div>
        </div> 
</div> 
<div id="info"> <div id="info1"></div> <div id="info2"></div><div id="info3"></div></div> 
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben