jQuery und Sortable = Probleme

MrWong

MrWong

Grünschnabel
Hallo zusammen,

ich bin am verzweifeln seit mehreren Tagen spiel ich mich mit dem Sortable und komme auf keinen Grünen zweig :-(

Hier im groben mein HTML Aufbau

Code: 
<div class="contaner">
<ul calss="ebene1" id="1">
<li><ul class="ebene2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul></li>
</ul>
</div>

<div class="container">
<ul calss="ebene1" id="2">
<li><ul class="ebene2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul></li>
</ul>
</div>

Meinem Problem ist das ich den UL Block Id 2 im ganzen verschieben möchte d.h. alles was in dem Block hängt soll mit verschoben werden nach oben oder unten.

Zum anderen möchte ich aber auch das die ganzen LI Einträge untereinander getauscht werden können d.h aus dem UL Block Id 2 möchte ich den Li 1 Eintrag in den UL Blick Id 1 verschieben können und auch umgekehrt.

Eine von beiden Sachen bekomme ich immer hin aber nicht beides auf einmal.

Mein jQuery sieht momentan so aus Funktioniert aber nur mit dem Div Container
Code: 
		$(".container").sortable({
			handle: 'div',
			connectWith: '.column'
		});
		
		$(".ebene1, ebene2").sortable({
			handle: 'ul',
			connectWith: 'ul'
		});

		$(".ebene1, ebene2, .container").disableSelection();

Ich hoffe mir kann hier jemand weiterhelfen.

Grüße
Mr Wong
 
Moin,

so gehts bei mir:
Code: 
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
 
</head>
<body>
<style type="text/css">
.container{background:#d1d1d1}
.container ul{border:1px solid #c1c1c1}
.container li{border:1px dotted #c1c1c1}
</style>
<div class="container">
  <ul class="ebene1" id="liste1">
    <li>
      <ul class="ebene2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
  </ul>
</div>

<div class="container">
  <ul class="ebene1" id="liste2">
    <li>
      <ul class="ebene2">
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </li>
  </ul>
</div>
 <script type="text/javascript">
  $('.container *').sortable({ helper: 'clone',connectWith: '.container *' });
  </script>
</body>
</html>

Falls du nicht an jQuery gebunden bist, könntest du dir ja mal die scriptaculo.us-Variante anschauen, die ist nach meinem Empfinden einfacher zu "Bedienen". http://dev.oriontransfer.co.nz/SortableTree/original/index.html
 
Zuletzt bearbeitet:
Hi,

fällt dir hier etwas auf?

Code: 
<div class="contaner">
<ul calss="ebene1" id="1">
<li><ul class="ebene2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul></li>
</ul>
</div>

<div class="container">
<ul calss="ebene1" id="2">
<li><ul class="ebene2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul></li>
</ul>
</div>


Desweiteren darf ein ID-Bezeichner nicht mit einer Ziffer beginnen - siehe http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name.

mfg Maik
 
Danke Sven ich schau mir das mal an, und das mit dem scriptaculo.us schaut auch sehr Interessant aus.
Mal schauen ob ich dann alles mit Prototype realisiere.

@Maik das mit der id=1 und 2 war nur ein Beispiel für die Erklärung im Original schaut das auch anders aus.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück