JQuery 정렬 가능한 '변경'이벤트 요소 위치

JQuery 정렬 가능한 '변경'이벤트 요소 위치

---

도우미의 현재 위치를 새 위치로 드래그하는 방법이 있습니까?

$("#sortable").sortable({
        start: function (event, ui) {
            var currPos1 = ui.item.index();
        },
        change:  function (event, ui) {
            var currPos2 = ui.item.index();
        }
});

currPos1과 currPos2는 실제 변화가 일어날 때 같은 값을 갖는 것 같습니다!

내가 달성해야 할 것은 '드래그 시작 요소'에서 '현재 대체 요소'사이의 모든 위치를 사용자에게 강조 표시하는 것입니다. 사용자가 마우스 버튼을 놓으면 업데이트가 발생하고 새 위치를 얻지 만 마우스를 놓기 전에 필요합니다.

---

업데이트 : 2016 년 8 월 26 일 ^{최신 jquery 및 jquery UI 버전과 부트 스트랩을 사용하여 스타일을 지정합니다.}

• 데모 : http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/

$(function() {
    $('#sortable').sortable({
        start: function(event, ui) {
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
        },
        change: function(event, ui) {
            var start_pos = ui.item.data('start_pos');
            var index = ui.placeholder.index();
            if (start_pos < index) {
                $('#sortable li:nth-child(' + index + ')').addClass('highlights');
            } else {
                $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
            }
        },
        update: function(event, ui) {
            $('#sortable li').removeClass('highlights');
        }
    });
});

---

이것은 나를 위해 작동합니다.

start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
update: function (event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        //$('#sortable li').removeClass('highlights');
    }

---

사용 update, stop및 receive이벤트, 여기를 통해 확인

Jquery Sortable Update Event는 한 번만 호출 할 수 있습니까?

---

목록 항목 당 색인이 변경되는 정렬 가능한 목록에 관심이있는 사람이 있다면 (1st, 2nd, 3th 등 ...)

http://jsfiddle.net/aph0c1rL/1/

$(".sortable").sortable(
{
  handle:         '.handle'
, placeholder:    'sort-placeholder'
, forcePlaceholderSize: true
, start: function( e, ui )
{
    ui.item.data( 'start-pos', ui.item.index()+1 );
}
, change: function( e, ui )
  {
      var seq
      , startPos = ui.item.data( 'start-pos' )
      , $index
      , correction
      ;

      // if startPos < placeholder pos, we go from top to bottom
      // else startPos > placeholder pos, we go from bottom to top and we need to correct the index with +1
      //
      correction = startPos <= ui.placeholder.index() ? 0 : 1;

      ui.item.parent().find( 'li.prize').each( function( idx, el )
      {
        var $this = $( el )
        , $index = $this.index()
        ;

        // correction 0 means moving top to bottom, correction 1 means bottom to top
        //
        if ( ( $index+1 >= startPos && correction === 0) || ($index+1 <= startPos && correction === 1 ) )
        {
          $index = $index + correction;
          $this.find( '.ordinal-position').text( $index + ordinalSuffix( $index ) );
        }

      });

      // handle dragged item separatelly
      seq = ui.item.parent().find( 'li.sort-placeholder').index() + correction;
      ui.item.find( '.ordinal-position' ).text( seq + ordinalSuffix( seq ) );
} );

// this function adds the correct ordinal suffix to the provide number
function ordinalSuffix( number )
{
  var suffix = '';

  if ( number / 10 % 10 === 1 )
  {
    suffix = "th";
  }
  else if ( number > 0 )
  {

    switch( number % 10 )
    {
      case 1:
        suffix = "st";
        break;
      case 2:
        suffix = "nd";
        break;
      case 3:
        suffix = "rd";
        break;
      default:
        suffix = "th";
        break;
    }
  }
  return suffix;
}

마크 업은 다음과 같습니다.

<ul class="sortable ">
<li >        
    <div>
        <span class="ordinal-position">1st</span>
         A header
    </div>
    <div>
        <span class="icon-button handle"><i class="fa fa-arrows"></i></span>
    </div>
    <div class="bpdy" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</li>
 <li >        
    <div>
        <span class="ordinal-position">2nd</span>
         A header
    </div>
    <div>
        <span class="icon-button handle"><i class="fa fa-arrows"></i></span>
    </div>
    <div class="bpdy" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</li>
etc....
</ul>

---

$( "#sortable" ).sortable({
    change: function(event, ui) {       
        var pos = ui.helper.index() < ui.placeholder.index() 
            ? { start: ui.helper.index(), end: ui.placeholder.index() }
            : { start: ui.placeholder.index(), end: ui.helper.index() }

        $(this)
            .children().removeClass( 'highlight' )
            .not( ui.helper ).slice( pos.start, pos.end ).addClass( 'highlight' );
    },
    stop: function(event, ui) {
        $(this).children().removeClass( 'highlight' );
    }
});

깡깡이

임의의 데이터를 요소 저장소에 저장하지 않고 변경 이벤트 내에서 수행 할 수있는 방법의 예입니다. 드래그가 시작 ui.helper되는 요소는이고 현재 위치의 요소는 ui.placeholder이므로 두 인덱스 사이의 요소를 가져 와서 강조 표시 할 수 있습니다. 또한 this위젯이 첨부 된 요소를 참조하므로 내부 핸들러 를 사용할 수 있습니다 . 이 예제는 양방향 드래그로 작동합니다.

참조 URL : https://stackoverflow.com/questions/4956039/jquery-sortable-change-event-element-position