jQuery UI sortable : 항목 순서가 어떤 것인가를 결정

Question

Here JavaScript의 흥미로운 사용법은 항목을 드래그 앤 드롭으로 재정렬하는 것입니다. 내 페이지의 구현 자체는 잘 작동하지만 사용자가 항목을 넣는 순서를 결정하는 방법이 있습니까?

쿠키에 항목 주문을로드하고 저장하려고하므로 요청하는 중입니다.

Answer 1

는 요소의 인덱스 위치를 얻을

FULL WORKING DEMO & SOURCE

---

2012 업데이트 이것을 읽으려고 :

: JQuery와에 대한

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

COOKIE 플러그인을

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 :

이 그냥 예입니다하지만 당신은 아이디어를 가지고 : 당신이 사용 a를 할 수 있습니다 데이터베이스 대신 AJAX를 사용하여 lis를 가져 오십시오.

,

<?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

toArray sortable의 항목 ID를 문자열 배열로 serialize하는 메서드를 사용하십시오.

$("#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이 모양을 : 다음 (새 항목 주문 항목-ID)

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

요 u는이 내가 현재 무엇을 사용 후

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

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

Answer 4

같은 업데이트 기능을 뭔가로 구문 분석 할 수 있습니다

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

를 경고 값 :

2000:0,1000:1,3000:2 

Answer 5

다음 코드를 사용하여 항목의 순서를 가져 왔습니다.

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