0
나는 스 와이프 기능을 삭제하고 로컬로 환경 설정을 저장하는 jQuery 모바일 목록이 있습니다. 목록 항목을 다시 정렬하고 동일한 배열 내에이 기능을 저장하는 기능을 구현하려고합니다. 제발 도와주세요! http://jsfiddle.net/sidonaldson/pes2d/Sortable jQuery 모바일 목록; 로컬 저장소로
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">Re-order</li>
<li data-theme="c">1</li>
<li data-theme="c">2</li>
<li data-theme="c">3</li>
<li data-theme="c">4</li>
<li data-theme="c">5</li>
<li data-theme="c">6</li>
<li data-theme="c">7</li>
</ul>
<a data-role="button">Submit</a>
</div>
</div>
$(document).ready(function(e) {
$('li').removeClass('ui-corner-bottom');
$('ul')
.addClass('ui-corner-top')
.removeClass('ui-corner-all')
.sortable({
'containment': 'parent',
'opacity': 0.6,
update: function(event, ui) {
alert("dropped");
}
});
});
: 여기
function moveUp(item) {
var prev = item.prev();
if (prev.length == 0)
return;
prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() {
prev.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertBefore(prev);
});
}
function moveDown(item) {
var next = item.next();
if (next.length == 0)
return;
next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() {
next.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertAfter(next);
});
}
$(".FieldContainer").sortable({ items: ".OrderingField", distance: 10 });
$('button').click(function() {
var btn = $(this);
var val = btn.val();
if (val == 'up')
moveUp(btn.parents('.OrderingField'));
else
moveDown(btn.parents('.OrderingField'));
});
내 목록이 꽤 길어서 버튼을 원했을 때 스크롤해야하거나 아니면 모든 목록 항목에 드래그 가능한 아이콘이나 버튼 만 있으면 작동 할 수 있습니다. – user2124239