wake-up-neo.com

jQuery-Benutzeroberfläche sortierbar: Bestimmen, in welcher Reihenfolge die Elemente sind

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.

javascriptjqueryhtmljquery-uijquery-ui-sortable
20
Pieter

AKTUALISIERT 2012

FULL WORKING DEMO & SOURCE

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> 
';
}
?>
42
Luca Filosofi

Verwenden Sie die toArray -Methode, die die Item-IDs der sortierbaren Elemente in ein String-Array serialisiert.

$( "#sortable" ).sortable('toArray');
35
Glennular

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 [] {':'});

7
Ravi Ram

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

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();
});
0
Manish