float Problem bei Listen ausgabe

Sebs · 5. Dezember 2006

Hallo,

Ich bin gerade dabei mit Hilfe des Ajax Frameworks script.aculo.us eine Seite zu bauen, auf der Mann einzelne Elemente verschieben kann.

Rein Technisch klappt das sehr gut.

Rein Optisch bin ich noch nicht zufrieden.

Wenn man sich das Bild anschaut, ist auf der rechten seite eine Weiße Box in der steht. "Ist es möglich hier ... usw."

Die Box, die darunter steht soll in das weiße Feld rutschen.

Direkt daneben sollte dann auch wieder eine Box reinrutschen können, (unter den pinke länglichen Container) ohne dass die Zeile umgebrochen wird und die Box unter der dunklen box steht.

Vom Quelltext her sieht das ganze so aus:

HTML:

<ul class="sortable" id="firstlist">
		<li class="small" id="firstlist_firstlist1">
			ITEM 1 Dies ist ein ausgiebiger Test
		</li>
		<li class="small2" id="firstlist_firstlist2">
			Item 2 .
		</li>
		<li class="large" id="firstlist_firstlist3">
			Item 3 .
		</li>
		<li class="small" id="firstlist_firstlist4">
			Item 4 .
		</li>
		<li class="middle2" id="firstlist_firstlist5">
			Item 5 .
			<br  />
			<br  />
			asdasd
			<p />
			asdasd
			<p />
			as
		</li>
		<li class="small" id="firstlist_firstlist6">
			Item 6 .
		</li>
		<li class="middle" id="firstlist_firstlist7">
			Item 7 .
		</li>
	</ul>

Das entsprechende Stylesheet

HTML:

  ul.sortable {
    list-style-image:none;
    list-style-type:none;
    margin-top:5px;
    margin:0px;
    padding:0px;
	width:640px;
  }

  ul.sortable li {
    padding: 5px;
    margin:5px;
  }

  li.small {
    background-color: #ECF3E1;
   	border:1px solid #C5DEA1;
    cursor: move;
	float:left;
	width:180px;
	height:100px;
  }
    li.small2 {
    background-color: #FFDDE1;
   	border:1px solid #C5DEA1;
    cursor: move;
	float:left;
	width:180px;
	height:300px;
  }
	
  li.middle {
    border:1px solid #000;
    background-color: #142042;
    cursor: move;
	float:left;
	width:382px;
	padding: 5px;
  }
  
li.middle2{
    border:1px solid #000;
    background-color: #502042;
    cursor: move;
	float:left;
	width:382px;
	height:200px;
  }
  
  li.large {
    border:1px solid #000;
    background-color: #FE0;
    cursor: move;
	float:left;
	width:584px;
	height:200px;
  }

Mit position: absolute ist das eine Heidenarbeit die Elemente wieder gescheit zu plazieren. Deswegen die Frage, ob es noch anders geht.

Gruss und Danke schonmal

Sebs

Maik · 5. Dezember 2006

Vielleicht solltest du das Konstrukt anstelle einer Liste mit DIVs umsetzen?

Den angehängten Preview erziele ich mit dem gezeigten Quellcode zudem in keinem Browser, nicht im Firefox, nicht im IE, usw.

Sebs · 5. Dezember 2006

Der vollständigkeit halber hier nochmal der ganze quelltext:

HTML:

<!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" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us sortable functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../lib/prototype.js" type="text/javascript"></script>
  <script src="../src/scriptaculous.js" type="text/javascript"></script>
  <script src="../src/unittest.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
  	body{
		margin: 0 0 0 0;
	}
  	#layout{
		width:850px;
		background-color:#FFF;
		color:#000;
		font-family: verdana;
		clear: both;
		margin:0;	
	}
	
	#layout-left{
		width: 190px;
		float:left;
		background-color:#b3b3b3;
	}
	
	#layout-right{
		width:640px;
		float:right;
		background-color:#b3b3b3;
	}
	
  
  ul.sortable {
    list-style-image:none;
    list-style-type:none;
    margin-top:5px;
    margin:0px;
    padding:0px;
	width:640px;
  }

  ul.sortable li {
    padding: 5px;
    margin:5px;
  }

  li.small {
    background-color: #ECF3E1;
   	border:1px solid #C5DEA1;
    cursor: move;
	float:left;
	width:180px;
	height:100px;
  }
    li.small2 {
    background-color: #FFDDE1;
   	border:1px solid #C5DEA1;
    cursor: move;
	float:left;
	width:180px;
	height:300px;
  }
	
  li.middle {
    border:1px solid #000;
    background-color: #142042;
    cursor: move;
	float:left;
	width:382px;
	padding: 5px;
  }
  
li.middle2{
    border:1px solid #000;
    background-color: #502042;
    cursor: move;
	float:left;
	width:382px;
	height:200px;
  }
  
  li.large {
    border:1px solid #000;
    background-color: #FE0;
    cursor: move;
	float:left;
	width:584px;
	height:200px;
  }
  </style>
</head>
<body onload="alert((document.all.firstlist_firstlist5.getAttribute("height",0))">
<div id="layout">
<div  id="layout-left">
</div>
<div  id="layout-right">
	<ul class="sortable" id="firstlist">
		<li class="small" id="firstlist_firstlist1">
			ITEM 1 Dies ist ein ausgiebiger Test
		</li>
		<li class="small2" id="firstlist_firstlist2">
			Item 2 .
		</li>
		<li class="large" id="firstlist_firstlist3">
			Item 3 .
		</li>
		<li class="small" id="firstlist_firstlist4">
			Item 4 .
		</li>
		<li class="middle2" id="firstlist_firstlist5">
			Item 5 .
			<br  />
			<br  />
			asdasd
			<p />
			asdasd
			<p />
			as
		</li>
		<li class="small" id="firstlist_firstlist6">
			Item 6 .
		</li>
		<li class="middle" id="firstlist_firstlist7">
			Item 7 .
		</li>
	</ul>
	
	<script type="text/javascript">
	// <![CDATA[ 
	Sortable.create("firstlist", {dropOnEmpty:true,constraint:false ,
	 onChange:function(){$('firstlist_debug').innerHTML = Sortable.serialize('firstlist') }});
	// ]]>
	</script>
</div>
</div>
 <pre id="firstlist_debug"></pre>
 </body>
 </html>

Das Problem ist, dass script.aculo.us keine divs unterstützt. Die einzelnen elemente können ja durch klicken per drag and drop verschoben werden! Was geht ist folgendes:

HTML:

<li>
    <div>
   </div>
</li>

Gruss

Sebs

//edit

Im oben geposteten Beispiel ist die Liste noch in der Falschen Reihenfolge.

Dieses Beispiel geht (auch ohne die Javascriptfiles).

HTML:

<!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" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us sortable functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../lib/prototype.js" type="text/javascript"></script>
  <script src="../src/scriptaculous.js" type="text/javascript"></script>
  <script src="../src/unittest.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
  	body{
		margin: 0 0 0 0;
	}
  	#layout{
		width:850px;
		background-color:#FFF;
		color:#000;
		font-family: verdana;
		clear: both;
		margin:0;	
	}
	
	#layout-left{
		width: 190px;
		float:left;
		background-color:#b3b3b3;
	}
	
	#layout-right{
		width:640px;
		float:right;
		background-color:#b3b3b3;
	}
	
  
  ul.sortable {
    list-style-image:none;
    list-style-type:none;
    margin-top:5px;
    margin:0px;
    padding:0px;
	width:640px;
  }

  ul.sortable li {
    padding: 5px;
    margin:5px;
  }

  li.small {
    background-color: #ECF3E1;
   	border:1px solid #C5DEA1;
    cursor: move;
	float:left;
	width:180px;
	height:100px;
  }
    li.small2 {
    background-color: #FFDDE1;
   	border:1px solid #C5DEA1;
    cursor: move;
	float:left;
	width:180px;
	height:300px;
  }
	
  li.middle {
    border:1px solid #000;
    background-color: #142042;
    cursor: move;
	float:left;
	width:382px;
	padding: 5px;
  }
  
li.middle2{
    border:1px solid #000;
    background-color: #502042;
    cursor: move;
	float:left;
	width:382px;
	height:200px;
  }
  
  li.large {
    border:1px solid #000;
    background-color: #FE0;
    cursor: move;
	float:left;
	width:584px;
	height:200px;
  }
  </style>
</head>
<body onload="alert((document.all.firstlist_firstlist5.getAttribute("height",0))">
<div id="layout">
<div  id="layout-left">
</div>
<div  id="layout-right">
	<ul class="sortable" id="firstlist">
		<li class="large" id="firstlist_firstlist3">
			Item 3 .
		</li>
		<li class="small" id="firstlist_firstlist1">
			ITEM 1 Dies ist ein ausgiebiger Test
		</li>
		<li class="small" id="firstlist_firstlist4">
			Item 4 .
		</li>
		<li class="small" id="firstlist_firstlist6">
			Item 6 .
		</li>
				<li class="middle2" id="firstlist_firstlist5">
			Item 5 .
			<br  />
			<br  />
			asdasd
			<p />
			asdasd
			<p />
			as
		</li>
		<li class="small2" id="firstlist_firstlist2">
			Item 2 .
		</li>




		<li class="middle" id="firstlist_firstlist7">
			Item 7 .
		</li>
	</ul>
	
	<script type="text/javascript">
	// <![CDATA[ 
	Sortable.create("firstlist", {dropOnEmpty:true,constraint:false ,
	 onChange:function(){$('firstlist_debug').innerHTML = Sortable.serialize('firstlist') }});
	// ]]>
	</script>
</div>
</div>
 <pre id="firstlist_debug"></pre>
 </body>
 </html>

Gruss

Sebs

hela · 5. Dezember 2006

Hallo Sebs,
ich habe zwar noch nicht mit scriptaculous gearbeitet, würde dir trotzdem raten aus den LI-Selektoren die float-Eigenschaft heruszunehmen und dafür separate Klassenselektoren anzulegen:

Code:

...
li.small {
  background-color: #ECF3E1;
  border: 1px solid #C5DEA1;
  cursor: move;
  width: 180px;
  height: 100px;
}
...
ul.sortable li.fl-li { float: left; }
ul.sortable li.fl-re { float: right; }
...

Anschließend kannst du durch Hinzufügen der entsprechenden Klasse die LI-Blöcke einzeln links oder rechts floaten lassen, z.B. so:

HTML:

...
<li class="small2 fl-re" id="firstlist_firstlist2">Item 2 .</li>
<li class="middle fl-li" id="firstlist_firstlist7">Item 7 .</li>
...

Sicherlich musst du die Breite des UL-Elementes dann noch anpassen.

Sebs · 6. Dezember 2006

Danke für den Tip.

Aber leider kann ich nicht vorher festellen wo die einzelnen Elemente angeordnet werden. Und wenn ich da einzelnd recht oder links floate verhalten sich die einzelnen Elemente unberechenbar.

Mmh ich glaub ich muss mir da noch was anderes einfallen lassen.

Danke schonmal für eure Hilfe

Sebs

float Problem bei Listen ausgabe

Sebs

Mitglied

Anhänge

Maik

Sebs

Mitglied

hela

Sebs

Mitglied

Neue Beiträge