Drag&Drop - jsfiddle und es klappt bei mir nicht

Danke dir schon mal für die Antwort. Aber daran lag es wohl nicht, ich poste hier mal meinen Code:

bearbeiten.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bearbeiten</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
</head>
<body>
<h1>Sorting A Table With jQuery UI</h1>
<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
<thead>
<tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
<tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
<tr><td class="index">3</td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
<tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
<tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
// ----- code executed when the document loads
$(function() {
wireReorderList();
});

function wireReorderList() {
$("#reorderExampleItems").sortable();
$("#reorderExampleItems").disableSelection();
}

function saveOrderClick() {
// ----- Retrieve the li items inside our sortable list
var items = $("#reorderExampleItems li");

var linkIDs = [items.size()];
var index = 0;

// ----- Iterate through each li, extracting the ID embedded as an attribute
items.each(
function(intIndex) {
linkIDs[index] = $(this).attr("ExampleItemID");
index++;
});
$get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(",");
}
</script>
 
Mein Ansatzpunkt ist folgender:

Also ich hole mir aus der Datenbank einige Form inhalte, die ich dann in eine Tabelle packe. Der PHP Teil, den kann ich. So und dann möchte ich, dass der User halt per drag und drop sortieren kann und dann ein input feld, wo die position drinnen steht sich halt auch so verändert, dass wie bei der Tabelle 1 ... 2... usw so bleibt.

Wenn man das Form dann absendet wird der kram wieder in die Datenbank geschrieben.
 
Besser benutzt Du Code-Tags, wenn Du Code postet (in der Menüleiste oben das vierte Symbol von rechts).
Du musst, wenn Du die Tabelle mit sortable initialisierst, die ID deiner Tabelle verwenden:
Code:
        function wireReorderList() {
            $("#sort tbody").sortable().disableSelection();
        }
Dann kann man schon Mal die Tabelle durch Drag&Drop sortieren.

Außerdem musst Du auch dieses an deine Tabelle anpassen:
Code:
var items = $("#reorderExampleItems li");
So wie es ist, bezieht es sich auf eine Liste statt eine Tabelle. Leider verstehe ich nicht, welche Spalte aus der Tabelle Du holen willst und was Du damit machen willst.

Meinst Du $.get?
 
ahh die id hatte ich voll verpennt -_-

das zweite blicke ich jetzt nicht so ganz, aber zumindest klappt das drag&drop und die zahl davor bleibt so, wie sie sein soll.

Jetzt schaue ich mal weiter. Vielen lieben Dank für deine Hilfe!! :)
 
Aber es geht weiter mit dem Drag&Drop ...

Unten im JS Bereicht wird ja das D&D gemacht und dann sollte die updateIndex Funktion ja den Inhalt in meinen Textareas verändern. über das $('#textarea'+i).val('test'); will ich eigentlich darauf zugreifen und dann halt zum testen erstmal nur test drinnen stehen haben. Nachher kommt da der i rein.

In meiner Tabelle sind die Inhalte, die ich mir aus der DB ziehe drinnen. Also das ganze ist quasi eine Art Projekt-Notizblock, wo ich zwei verschiende Elemente: Element 1: (Nummer und Headline) und dann Element 2: (Nummer, Inhalt und Zusatzfeld) habe. Und diese Seite soll dann einfach nur die Reihnenfolge verändern können, wenn ich diese Blöcke hin und herschiebe.

Aktueller Code:

Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Notizen-Bearbeiten</title>
</head>
<body>
<?php
$projektid = $_GET["projektid"];
require_once ('dbcon.php');   
   
//MySqli Select Query
$results = $mysqli->query("SELECT * FROM block WHERE projektid LIKE '$projektid' ORDER BY position ASC");

echo "<table border='0' id='sort2' class='grid'>";   
echo "<tr><td>Nr.</td><td>Inhalt</td><td>Position</td><td>D&D</td></tr>";   
while($row = $results->fetch_assoc()) {
    echo "<tr>"; 
   
    $position = $row["position"]; $id = $row["ID"];
    $array = json_decode($row["blockarray"], true);
    $zaehler = count($array);
   
    if ($zaehler == 2) {
        echo "<td width='30px'><input type='text' size='2' name='$id' value='$array[0]'></td>";   
        echo "<td colspan='2' width='800px'><span class='headline'><input type='text' size='45' name='$id' value='$array[1]'></span></td>";    
    }
   
    if ($zaehler == 3) {
        echo "<td width='30px'><input type='text' size='2' name='$id' value='$array[0]'></td>";
        echo "<td width='600px'><input type='text' size='30' name='$id' value='$array[1]'></td>";
        echo "<td width='200px'><input type='text' size='5' name='$id' value='$array[2]'></td>"; 
    }   
    echo "<td><textarea id='textarea$position' cols='1' rows='1' name='$id'>"; echo $position; echo "</textarea></td>";
    echo "<td><img src='images/dud.png' width='30px'></td>";
    echo "</tr>";
} 
echo '</table>';       

// Frees the memory associated with a result
$results->free();

// close connection
$mysqli->close();
?>
   
</body>
</html>

<script language="javascript" type="text/javascript" src="script/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery-ui.js"></script>

<script type="text/javascript">

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
   
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            //$(this).html("<input type='text' size='2' value='"+i+"'>Pos. "+i);
            $('#textarea'+i).val('test');
        });
    };
   
$("#sort2 tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();   
</script>
 
Ich glaube ich habe es raus, zumindest zeigt er es mir richtig an :)

Könnte vl. jemand mit JS Kenntnissen das nochmal checken, ob ich da ggf. noch nen Fehler habe:

Code:
// Das veränderte td Feld
echo "<td><textarea class='index' id='textarea$position' cols='1' rows='1' name='$id'>"; echo $position; echo "</textarea></td>";




// Die neue Update Index Funktion
updateIndex = function(e, ui) {
        $('textarea.index', ui.item.parent()).each(function (i) {
            $(this).val(i);
        });
    };
 
Zurück