Hier ist eine interessante Verwendung von JavaScript: Elemente mit Drag & Drop neu ordnen. Die Implementierung selbst auf meiner Seite funktioniert gut, aber gibt es eine Möglichkeit zu bestimmen, in welcher Reihenfolge der Benutzer die Elemente einfügt?
Ich frage, weil ich die Artikelreihenfolge in einem Cookie laden und speichern möchte.
AKTUALISIERT 2012
holen Sie sich die Indexposition der Elemente versuchen Sie das zu lesen:
COOKIE-Plugin für Jquery:
JQUERY:
$(function() {
//coockie name
var LI_POSITION = 'li_position';
$('ul#sortable').sortable({
//observe the update event...
update: function(event, ui) {
//create the array that hold the positions...
var order = [];
//loop trought each li...
$('#sortable li').each( function(e) {
//add each li position to the array...
// the +1 is for make it start from 1 instead of 0
order.Push( $(this).attr('id') + '=' + ( $(this).index() + 1 ) );
});
// join the array as single variable...
var positions = order.join(';')
//use the variable as you need!
alert( positions );
// $.cookie( LI_POSITION , positions , { expires: 10 });
}
});
});
HTML:
<ul id="sortable">
<li id="id_1"> Item 1 </li>
<li id="id_2"> Item 2 </li>
<li id="id_3"> Item 3 </li>
<li id="id_4"> Item 4 </li>
<li id="id_5"> Item 5 </li>
</ul>
PHP:
dies ist nur ein Beispiel, aber Sie haben die Idee: Vielleicht möchten Sie stattdessen eine Datenbank verwenden und AJAX verwenden, um die lis zurückzuholen:
<?php
//check if cookie is set..
if ( isset( $_COOKIE['li_position'] ) ) {
//explode the cockie by ";"...
$lis = explode( ';' , $_COOKIE['li_position'] );
// loop for each "id_#=#" ...
foreach ( $lis as $key => $val ) {
//explode each value found by "="...
$pos = explode( '=' , $val );
//format the result into li...
$li .= '<li id="'.$pos[0].'" >'.$pos[1].'</li>';
}
//display it
echo $li;
// use this for delete the cookie!
// setcookie( 'li_position' , null );
} else {
// no cookie available display default set of lis
echo '
<li id="id_1"> Fuji </li>
<li id="id_2"> Golden </li>
<li id="id_3"> Gala </li>
<li id="id_4"> William </li>
<li id="id_5"> Jordan </li>
';
}
?>
Verwenden Sie die toArray
-Methode, die die Item-IDs der sortierbaren Elemente in ein String-Array serialisiert.
$( "#sortable" ).sortable('toArray');
HTML
<ul id="sortable">
<li id="id1"> Item 1 </li>
<li id="id2"> Item 2 </li>
<li id="id3"> Item 3 </li>
<li id="id4"> Item 4 </li>
<li id="id5"> Item 5 </li>
</ul>
JQUERY
$("#sortable").sortable(
{
update: function () {
var strItems = "";
$("#sortable").children().each(function (i) {
var li = $(this);
strItems += li.attr("id") + ':' + i + ',';
});
updateSortOrderJS(strItems); <--- do something with this data
}
});
strItems werden aussehen (Neuartikel-Bestellung: Artikel-ID)
0,49: 1,365: 2,50: 3,364: 4,366: 5,39: 6
dann kannst du es in eine update-funktion einfassen, wie etwa
List eachTask = new List (itemsList.Trim (). Split (new Char [] {','}));
dann
String [] item = i.Split (neues Zeichen [] {':'});
Das verwende ich momentan:
<div id="sortable">
<div id="2000"></div>
<div id="1000"></div>
<div id="3000"></div>
</div>
$('#sortable').sortable({
update: function () { save_new_order() }
});
function save_new_order() {
var a = [];
$('#sortable').children().each(function (i) {
a.Push($(this).attr('id') + ':' + i);
});
var s = a.join(',');
alert(s);
}
Alarmierter Wert:
2000:0,1000:1,3000:2
Ich habe folgenden Code verwendet, um die Reihenfolge des Artikels zu erhalten.
Html
<div id="sortable">
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
</div>
JQuery
$(document).ready(function(){
$("#sortable").sortable({
stop : function(event, ui){
$('#sortable > div').each(function(){
alert($(this).html());
});
}
});
$("#sortable").disableSelection();
});