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

답변

0

jQuery를 모바일과 정렬 드래그 & 드롭 목록의 좋은 예입니다 http://jsfiddle.net/f18nfz/nUSUB/2/

그래서 함수 (http://jsfiddle.net/maziar/P2XDc/) 같은 수 : 여기 내 바이올린입니다

+0

내 목록이 꽤 길어서 버튼을 원했을 때 스크롤해야하거나 아니면 모든 목록 항목에 드래그 가능한 아이콘이나 버튼 만 있으면 작동 할 수 있습니다. – user2124239