jQuery Sortable und TDs @ tutorials.de: Tutorials, Forum & Hilfe

NM78 · 29.06.09 16:32

Hallo,

ich suche eine Möglichkeit Einträge aus einer ul-Liste in eine andere ul-Liste zu ziehen.

Mit jquery klappt das prinzipiell schon mal super:

http://jqueryui.com/demos/sortable/#connect-lists

Allerdings möchte ich, dass man einfach nur den gewünschten Eintrag von einer in die andere Box ziehen braucht (und nicht zwingend auf die entsprechende ul Liste).

Ich habe mir die Seite so aufgebaut:

Code :

<table>
<tr>
<td id="linkeSeite">
<ul id="sortable1" class="connectedSortable">Liste 1....</ul>
</td>
<td id="rechteSeite">
<ul id="sortable1" class="connectedSortable">Liste 2....</ul>
</td>
</tr>
</table>

Das Beispiel bei jquery zeigt leider nur wie man die Elemente von einer ul-Liste in eine andere ziehen kann indem man diese mit der Maus auf die andere Liste zieht:

Code :

1
2
3

        $("#sortable1, #sortable2").sortable({
            connectWith: '.connectedSortable'
        }).disableSelection();

Was aber wenn eine Liste erstmal leer ist? Die meisten Nutzer würden das Listenelement einfach in die bis dahin noch leere Box ziehen.

Wisst Ihr wie das geht?

Sven Mintel · 30.06.09 04:14

Moin,

das Einfachste wäre es, wenn du dann garkeine Listen nimmst...du kannst auch gleich die <td> sortierbar machen:

Code :

<table id="sortable" width="300" border="1">
<colgroup width="50%" span="2"></colgroup>
  <tr>
    <td>
      <div>item#1</div>
      <div>item#2</div>
      <div>item#3</div>
    </td>
    <td></td>
  </tr>
</table>
<script type="text/javascript">
<!--
$("#sortable td").sortable({
  connectWith: '#sortable td'
  }).disableSelection();
//-->
</script>

Insofern du nicht die Option benötigen solltest, mit den Listen mehrdimensionale Strukturen zusammensortieren zu Lassen, würde das die selbe Funktionalität liefern.
Da sich aber immer irgendwo in der <tr> ein nicht-leere Zelle befinden würde, bestände nicht das Problem, dass man bei einer leeren Zelle nicht das "Ziel" findet...denn alle Zellen der <tr> haben ja die gleiche Höhe.

Solltest du jedoch unbedingt die Listen brauchen, müsstest du im Falle, dass eine der Listen leer ist, diese per CSS "strecken", damit der User etwas zum Droppen hat.

NM78 · 02.07.09 11:59

Hat das bei Dir funktioniert? Bei mir hats nicht geklappt.

Hier mal meine neue Version:

Code :

<?xml version="1.0" encoding="UTF-8"?>
<!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="de" lang="de">
<head xml:lang="de" lang="de">
<title>Sortable Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
 
<style type="text/css">
table   {border:1px solid #666;}
td      {background: #FDB;}
td div  {background: #FEC;border:solid 1px #AAA;padding: 1px 1px 1px 5px;margin:1px;}
 
</style>
<script type="text/javascript">
$(document).ready(function() {
    
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
    
});
</script>
</head>
<body>
 
<table width="300px">
<colgroup width="50%" span="2"></colgroup>
  <tr>
    <td id="sortable1" class="connectedSortable">
      <div>Item#1</div>
      <div>Item#2</div>
      <div>Item#3</div>
      <div>Item#4</div>
      <div>Item#5</div>
    </td>
    <td id="sortable2" class="connectedSortable"></td>
  </tr>
</table>
 
</body>
</html>

Leider funktioniert das auch nicht. Es scheint, als würde jQuery die einzelnen Elemente noch nicht einmal erkennen.

Sven Mintel · 02.07.09 17:21

Jo, klar funktioniert das, sonst hätt ichs nicht gepostet

Sortable ist Bestandteil von jquery.userinterface

Du musst da noch 2 weitere Skripte einbinden, da UI nicht Basis-Bestandteil von jQuery ist:

Code :

1 2	<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>

NM78 · 03.07.09 08:23

Oh Mann, Sorry! Darauf hätte ich auch allein kommen müssen. Vielen Dank! Funktioniert alles super!

NM78 · 03.07.09 11:08

Ich suche eine Möglichkeit Elemente von einer Liste in eine andere Liste zu schieben und diese dabei automatisch alphabetisch zu sortieren.

Das verschieben zwischen 2 Listen klappt mit jQuery:

http://jqueryui.com/demos/sortable/#connect-lists

Aber wie bekommt man es hin alle Elemente automatisch neu (alphabetisch) zu sortieren wenn ein neues hinzu kommt?

Also eigentlich brauche ich nicht die sortable Funktion bei der man alle Elemente selber sortieren kann. Ich habe sie nur genutzt um auf einfach Weise die Elemente von einer Box in eine andere zu verschieben (ist ja auch eine Art "sortieren").

Sven Mintel · 04.07.09 02:10

Moin,

du könntest das Sortieren überwachen(sortupdate).
Wurde etwas sortiert, rufst du eine Callback-Funktion auf, welche den Inhalt der Liste bspw. in einen Array liest, diesen Array sortiert anhand des jeweiligen Kriteriums und daraus eine neue Liste erstellt, womit die bisherige ersetzt wird.

NM78 · 06.07.09 08:48

Danke. Das Problem ist, dass ich die sortable Geschichte mit "revert" laufen lasse. Dadurch "fliegt" der Eintrag sozusagen super schick animiert in die andere Liste. Der Event wird aber wahrscheinlich erst danach ausgelöst (bei den CSS Klassen ist es zumindest so). Das würde für den Benutzer wahrscheinlich sehr seltsam aussehen wenn der Eintrag z.B. nach oben fliegt und dann aber plötzlich in der Mitte wieder auftaucht.

**Quaese** · 06.07.09 12:15

Hi,

das Phänomen, dass das Element nach dem Sortieren plötzlich an einer anderen Stelle auftaucht, hättest du aber auch ohne die revert-Option.

Du könntest höchstens im update-Event eine weitere Animation anstossen, die die Listenelemente nacheinander ausblendet, die sortierten Elemente einfügt und anschliessend die erneuerte Liste wieder einfadet.

Ein Beispiel, wie ich mir das vorstelle, habe ich dir hier hochgeladen.

Ciao
Quaese

NM78 · 06.07.09 13:19

Vielen Dank Quaese für die Hilfe! Das funktioniert prima.

So richtig löst es mein Problem aber nicht. Ich habs wahrscheinlich nicht richtig beschrieben. Der Benutzer soll in der Linken Box ein Element anklicken. In der Rechten Box müsste sofort Platz für das Element geschaffen werden. Wenn er das Element los lässt soll es direkt an die richtige Position gesetzt werden bzw. "fliegen".

Also ohne, dass die Liste erst ausgeblendet wird. Ich habe in den Listen manchmal über 50 Einträge, wenn das jedes Mal erst ein- und ausgeblendet wird dauert es zu lange, außerdem wird es dann zu unruhig.

Vielleicht kommt dieses Feature ja mit einem der nächsten Updates. Ebenfalls interessant wäre schon weiter sortieren zu können während ein anderes Element noch an die korrekte Position "fliegt". Im Moment muss man nämlich erst abwarten bis es dort angekommen ist.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQuery: sortable

[jQuery] sortable

[jQuery] sortable - serialize

jQuery und Sortable = Probleme

Sortable mit jquery

E-Mail:

Abonnieren Abbestellen