Jquery可排序“更改”事件元素位置

Posted 2023-02-24

【中文标题】Jquery可排序“更改”事件元素位置

【英文标题】：Jquery sortable 'change' event element position

【发布时间】：2011-06-24 18:30:07

【问题描述】：

有没有办法让助手的当前位置被拖到新位置上？

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

当实际发生变化时，currPos1 和 currPos2 似乎具有相同的值！

我需要实现的是向用户突出显示“开始拖动元素”到“当前替换元素”之间的所有位置。一旦用户释放鼠标按钮，就会发生更新，然后我才会获得新位置，但在释放鼠标之前我需要它。

【问题讨论】：

我再次更新了代码。试用演示并告诉我。

【参考方案1】：

更新：26/08/2016 ^{使用最新的 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');
        
    );
);

【讨论】：

我看到了这个问题。它适用于“更新”事件，但我需要“更改”事件中的当前位置！

var index = ui.placeholder.index() 是我要找的，谢谢

我遇到了这段代码的问题，在您的示例中，如果您移动一个元素以突出显示某些元素，然后将其返回到原来的位置，即使您放下它，高亮仍然存在。

我把最后一个函数从update改成了stop，所以即使最后的位置是原来的它也会去掉高光

我正在使用这样的代码，但动态添加的元素有问题，它们无法触发事件，我很困惑我该怎么做？

【参考方案2】：

这对我有用：

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

【参考方案3】：

使用update、stop 和receive 事件，在这里查看

Jquery Sortable Update Event can called only one time?

【参考方案4】：

如果有人对每个列表项（第一个、第二个、第三个等）索引不断变化的可排序列表感兴趣：

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>

【参考方案5】：

$( "#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' );
    
);

FIDDLE

如何在更改事件中完成而不将任意数据存储到元素存储中的示例。由于拖动开始的元素是ui.helper，当前位置的元素是ui.placeholder，我们可以把这两个索引之间的元素高亮。此外，我们可以在处理程序中使用this，因为它引用了小部件附加的元素。该示例适用于双向拖动。