jQuery UI sıralanabilir: öğelerin hangi sırada olduğunu belirleme

Question

Here, JavaScript: sürükle ve bırak yöntemlerini yeniden sıralamak için kullanılan ilginç bir kullanımdır. Sayfamdaki uygulamanın kendisi iyi çalışıyor, ancak kullanıcının ürünü hangi sıraya koyduğunu belirlemenin bir yolu var mı?

Soruyorum çünkü bir çerezde öğe sırasını yüklemek ve kaydetmek istiyorum.

Answer 1

elemanlarının dizin konumunu almak

FULL WORKING DEMO & SOURCE

---

2012 GÜNCELLEME bu okumayı deneyin:

: jquery için

• Getting the position of the element in a list when it's drag/dropped (ui.sortable)

COOKIE eklentisi

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:

bu sadece bir örnektir ama fikrim var: Eğer kullanım a isteyebilir veritabanı yerine ve geri almak için AJAX kullanın:

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

Answer 2

Sorgunun öğe kimliğini bir dizi diziye serileştiren toArray yöntemini kullanın.

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

Answer 3

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 gibi görünecek : o (yeni maddelik sipariş öğe kimliği)

0,49:1,365:2,50:3,364:4,366:5,39:6

yo u Bu şu anda ne kullanın sonra

List eachTask = new List(itemsList.Trim().Split(new char[] { ',' }));

String[] item = i.Split(new Char[] { ':' });

Answer 4

gibi bir güncelleme fonksiyonları şey ayrıştırmak edebilirsiniz:

<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); 
} 

uyarılmak değeri:

2000:0,1000:1,3000:2 

Answer 5

Ürünün sırasını almak için aşağıdaki kodu kullandım.

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