jquery_jquery에서 정렬 가능한 정렬 후 상태를 저장하는 솔루션

당시 jquery 공식 홈페이지에서 몇 문장을 복사해서 시작했는데, 나중에 보니 별로 유용하지도 않고 꽤 느리더군요. 쯧쯧~~ 오늘 아침까지 정리된 결과를 저장하는 방법을 몰랐는데 마침 회사에서 그런 기능을 만들겠다고 해서 다시 배웠네요.
우선 jquery 공식 데모(http://jqueryui.com/demos/)에서 비슷한 코드를 발견했습니다. 내가 원하는 것은 포틀릿(http://jqueryui.com/demos/sortable/portlets.html)입니다. igoogle 홈페이지와 같습니다. 인용할 js를 모두 추가한 후 몇 줄의 코드가 완료되는 것은 매우 간단한 것 같습니다.

코드 복사 코드는 다음과 같습니다.

html 코드 생략... 자세한 내용은 데모를 확인하세요.

이 내용을 작성한 후 드래그해 보세요. 성취감을 느끼시나요? 나쁘지 않네요, 젊은이여, 미래는 있습니다. sortable에는 많은 매개변수가 있습니다. 자세한 내용은 공식 웹사이트를 참조하세요! 여기서 connectWith:'.column'이 무엇을 의미하는지 이야기해 보겠습니다. 이는 클래스 열이 있는 모든 포틀릿이 한 열의 포틀릿을 다른 열로 드래그할 수 있음을 의미합니다. 그냥 시도해 보면 알게 될 것입니다. 물론 오늘의 초점은 드래그하는 방법이 아니지만 드래그 후 새로고침을 하면 여전히 현재 순서가 유지됩니다.

약간의 어려움이 있었지만 그렇게 해야 합니다. 그렇지 않으면 앞으로 어떤 여자도 당신과 결혼하지 않을 것입니다! ^_^ 그래서 구글 바이두를 시작하게 되었습니다. 어떤 사람들은 sortable의 serialize 메소드를 사용하여 ID 배열을 얻을 수 있다고 하는데, 아쉽게도 저는 얻지 못했습니다. 그렇게 하면 toArray 메소드를 사용하여 ID 배열을 얻을 수도 있다고 말하는 사람들도 있습니다. 그런데 아주 불쾌한 일이 일어났습니다.

$('.column').sortable('toArray');

이 방법으로 첫 번째 클래스가 열인 ID 배열만 가져올 수 있습니다. 시도했지만 작동하지 않았습니다. 어쩌면 할 수 있을지 알려주세요! 그래서 다른 방법으로만 전환할 수 있습니다. 어쩌면 전체 웹 페이지의 레이아웃을 저장해도 괜찮지 않을까? 하하, 저도 그렇게 생각해요! iedeveloper 디버깅 도구를 통해 드래그한 후 변경된 사항을 발견했습니다. 변경된 것은 스타일이 아니라 div의 순서였습니다. 전체 내용을 저장하면 되는 것 같긴 한데, 용량이 좀 커서 동적 내용에는 적합하지 않네요. 어떡하지, 그냥 순서대로 아이디를 저장하면 O가 되지 않을까 싶어서 아이디를 하나씩 줬어요.

모든 것이 처음에는 어렵다. 이런 생각이 들고 나서 화장실을 열었나요? 먼저 좀 쉬고 갈게요 문 열어주셔서 감사합니다 바로 올게요!

이 아이디어를 차근차근 따라해 봅시다. 첫 번째는 모든 열을 가져오는 것입니다.

$.each($(".column"), function(m) {}

그런 다음 각 열 아래에서 포틀릿을 찾습니다.

$.each($(".column"), function(m) {
$.each($(this).children(".portlet"), function(d) {
}

그런 다음 자신만의 방식으로 저장하세요

코드를 복사하세요 코드는 다음과 같습니다.

function saveLayout(){
var list = "";
$.each($(".column"), function(m) {
list = $(this).attr( 'id') ":";
$.each($(this).children(".portlet"), function(d) {
list = $(this).attr('id') " @";
})
list = "|";
})
$.cookie("list", list)}

다른 방법도 사용됩니다. 여기에 하나의 구성 요소 jquery.cookie

시작 변경

코드 복사 코드는 다음과 같습니다.

$(".column").sortable({
connectWith: '.column',
stop: saveLayout
})

stop

마지막으로 컨테이너에 순서대로 읽어들이는 것을 의미합니다. 여기서는 많은 말을 하지 않겠습니다. 말로 설명할 수는 없습니다.

코드 복사 코드는 다음과 같습니다.

var list = $.cookie("list") / /쿠키 값에서 목록 가져오기
//alert(list)
var arrColumn = list.split('|')
$.each(arrColumn, function(m, n) {
var elemId = n.split (':')[0]; //컨테이너 ID
var arrRow = n.split(':')[1] ? n.split(':')[1]. Split('@') : ""; //단일 시퀀스 ID
$.each(arrRow, function(m, n) {
if (n) {//null 값 제외
$(" #" elemId).append( $("#sb" n).attr('id', n))//컨테이너에 시퀀스 추가
}
});
})

자 오늘은 여기까지입니다. 타이핑하고 조판하는 데 1시간이 걸렸고 회사에서는 시간당 16위안을 주었습니다. 그럼 안녕!
궁금한 점이 있으면 묻지 마세요. 저는 매우 바빠요. 토론할 다른 사람을 찾으려면 QQ 그룹 5678537로 이동하세요!

데모 코드http://demo.jb51.net/js/Sortable/Sortable.htm