Question

我有一个使用jQueryUI可排序的列表。我需要根据插件的“ change”事件来跟踪拖动时元素的每个步骤。

但是它只能在缓慢，正常的阻力下可靠地工作。以这些速度，没有任何错误。但是，如果用户相对快速地拖动元素（列表越大，因为鼠标拥有更多的获取速度的空间，列表就会越频繁），则“更改”事件将失去对某些步骤的跟踪，因此，一些有用的信息也会随之丢失不会在控制台中引发任何错误的方式。

显示问题：

https://jsfiddle.net/yhp3m6L8/2/

在此jsFiddle中，您可以拖动一个元素并以示例的形式查看其索引更改。在列表下方，拖动时，将有一个控制台仿真，以黑色跟踪索引。

如果以相当快的速度拖动，您会看到其中一些索引变为红色。这就是问题。这意味着由于我无法理解的原因，在更改事件期间可排序脚本忽略了它们的先前位置。连续性被破坏了，这种连续性对于我的需求而言是原始的。速度是唯一破坏连续性的东西。但是，跟不上鼠标快速拖动的“变化”事件似乎很奇怪。

脚本：

它的一半与跟踪索引有关，因为Sortable具有一种独特的引用索引的方式，该方式取决于方向（上/下），但还包括元素相对于其初始位置的当前位置（前后））。因此，只需极少量的代码即可直观地理解这些索引。使用该脚本，该元素将获得一个直观的索引，该索引直观地是您期望看到的有序索引。

但是，此脚本是问题的展示，可能不是问题（请参见下面的边注）。

脚本的另一半只是为了调试目的而仿真一种控制台。

我的猜测：

我可能是错的，但最终我认为这是“更改”事件的跟踪问题，或者被拖动的元素不能跟上鼠标光标的速度（感觉好像并不总是位于相对较高的光标下方）速度）。除非有一个我不知道的使用Sortable选项...

我认为这是其中一种情况，因为无论我尝试在“ change”事件中使用什么代码，我总是会遇到这个缺口问题。

HTML：

<html>
    <body>
        <div class="panel">
            <ul class="panel_list">
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="ticked"></li>
                <li class="unticked"></li>
                <li class="unticked"></li>
                <li class="unticked"></li>
            </ul>
        </div>
        <div class='console'></div>
    </body>
</html>

CSS：

.console{
    width:100%;
}

.panel ul{
    list-style-type:none;
    width:30%;
}

.panel li{
    height:29px;
    border-bottom:1px solid #454d5a;
    text-align: left;
    vertical-align: middle;
    line-height:29px;
    padding-left:8px;
    background: #666;
}

.panel_highlight{
    height:29px;
    background:#1c2128 !important;
}

.unticked{
    color:#7c7a7d;  
    background:#222 !important;
}

jQuery：

// jQuery: 3.3.1

// jQueryUI: 1.11.4 (downgraded from 1.12.1, because of documented 
// performance issues but...with no effect)

var origValue;
var oldInfo;
var c=0;
var x=0;

// LIST RELATED

//Just to have a visual on the indexes in the list. 
$('li').each(function(){
    $(this).data('idx',c++);
    $(this).text(c);
})
c=0;

$( ".panel_list" ).sortable({
    placeholder: 'panel_highlight',
    items      : '>li.ticked',
    cancel     : '>li.unticked',
    tolerance  : 'pointer',
    axis       : 'y',
    opacity    :  0.9,
    start: function(event, ui){

    // LIST RELATED

        origValue = ui.item.data('idx');

    // CONSOLE RELATED (initialise variables)

        $('.console').html('');oldInfo='';
    },
    change: function(event, ui){

    // LIST RELATED

        var idx = ui.placeholder.prevAll().filter(':not(.ui-sortable-helper)').length;
        var a=ui.placeholder.index();
        var b=a+1;

        //detect the direction of the dragging
        if(idx - $(this).data('idx')==1)
        {//downward dragging

            //if the element is below its initial position (or x=1)
            if((a<=origValue) || (x==1)){ui.item.text(b);x=0;}
            //if the element is still above its initial position
            else                        {ui.item.text(a);};
        }
        else
        {//upward dragging

            //if the element is still below its initial position
            if(a<=origValue)            {ui.item.text(b);x=1;}
            //if the element is above its initial position
            else                        {ui.item.text(a);};
        };
        $(this).data('idx', idx);

       // Update the visual on the indexes in the list. 
        $('li').each(function(){
            if(ui.item.index() !=$(this).index()){           
                $(this).data('idx',c++);
                $(this).text(c);
            }
        })
        c=0;

    // CONSOLE RELATED (show indexes progression and gaps)

        var info=$('.console').html();
        if(oldInfo !=''){
            var valAbs= Math.abs( parseInt(ui.item.text()) - parseInt(oldInfo));
            if(valAbs==1){info=info+' + '+ui.item.text();}
            else{info=info+' + <span style="color:red">'+ui.item.text()+'</span>';};
        }
        else{info=ui.item.text();};
        $('.console').html(info);
        oldInfo = ui.item.text();
    }
});

旁注：

“ change”事件中的所有代码都是为您量身定制的，以查看问题，可能不是问题本身。我让你做这件事的评委，但这是公平的。

我在更改部分中的实际脚本是不同的。它触发了某些表列的重新排序，这就是我第一次检测到该问题的原因，因为表重新排序在高速时会出现故障。因此，这里的虚拟脚本只是我将其缩小最小化，同时以视觉方式向您显示问题。

重点是评估是否可以解决性能问题，缺少我应该添加的Sortable选项，可以固定的拖动/光标延迟或是否有任何技巧可以解决此跟踪问题。

我认为这是一个公平的警告，以防止您麻烦调试只是一个演示程序的虚拟脚本。但是考虑到我只是一个新手，我可能错了，请按照您认为合适的方式做。

在所有情况下，我们将非常感谢您的帮助或投入。预先谢谢你。

编辑：这是我的真实（缩小）脚本，提供了“ dataTable.colReorder.move”事件。它涉及更多，因为它需要知道着陆索引（a / b），而且还需要拖动元素的当前索引（a / b / c / d）。而且sortable有自己的情境索引方法。

$( ".panel_list" ).sortable({
    placeholder: 'panel_highlight',
    items      : '>li.ticked',
    cancel     : '>li.unticked',
    start: function(event, ui){
        lastValue='';
        origValue=ui.item.index();
        $(this).data('idx', ui.item.index());
    },
    change: function(event, ui){
        var x;
        var idx = ui.placeholder.prevAll().filter(':not(.ui-sortable-helper)').length;
        var a= ui.placeholder.index();
        var b=a+1;var c=a+2;var d=a-1;

        if(idx - $(this).data('idx')==1)
        {//downward
            if((origValue>=a) || (x==1)){dataTable.colReorder.move(a,b);lastValue=b;x=0}
            else                        {dataTable.colReorder.move(d,a);lastValue=a;}
        }
        else
        {//upward
            if(origValue>=a)            {dataTable.colReorder.move(c,b);lastValue=b;x=1}
            else                        {dataTable.colReorder.move(b,a);lastValue=a;}
        }   

        $(this).data('idx', idx);       
    }
});

Answer 1

遗憾的是，没有没有解决方案来解决该问题。

我首先尝试使用sort event callback ...并且在快速拖动时也会出现相同的“跳过”问题。

我想知道为什么要几分 ...
然后，我讲解了.sortable()可能会依赖什么...我带来了唯一可能的“浏览器”事件：mousemove。

mousemove经常开火...就像“机关枪” ...开火速度不足以达到您的期望。

要验证这一点，我只是在未更改的小提琴的末尾添加了此mousemove处理程序：

$( ".panel_list" ).on("mousemove",function(e){
  console.log($(e.target).index());
});

它记录与div.console中完全相同的数字。

因此，问题肯定不是归因于.sortable()。

编辑
我上面所说的仍然是正确的...但是既然您已经有了“跳过检测” ，为什么不使用它来填补空白呢？

您有oldInfo，它是新.index()之前的最后一个change。
并且您有了新的.index() ...

根据移动是向上还是向下，您需要一个或另一个for循环来填充编号的空白。 这也是您触发这些数字的触发点 ...

;）

这是更改的部分：

// CONSOLE RELATED

info=$('.console').html();
if(oldInfo !=''){

  var valReal = parseInt(ui.item.text()) - parseInt(oldInfo);
  var valOld = parseInt(oldInfo);

  var valAbs= Math.abs( parseInt(ui.item.text()) - parseInt(oldInfo));
  if(valAbs==1){info=info+' + '+ui.item.text();}
  else{

    // ADDING THE SKIPPED ONES!
    // Upward (in blue)
    if(valReal>0){
      for(i=valOld+1;i<valOld+valReal;i++){
        info=info+' + <span style="color:blue">'+( i )+'</span>';
      }

    // Downward (in green)
    }else{
      for(i=valOld-1;i>valOld+valReal;i--){
        info=info+' + <span style="color:green">'+( i )+'</span>';
      }
    }

    // The one caugth after a gap (in red)
    info=info+' + <span style="color:red">'+ui.item.text()+'</span>';
  };
}

它值得摘录...为了后代。 （以全页模式运行。）

var origValue;
var oldInfo;
var info;
var c=0;
var x=0;

// LIST RELATED

//With or without this, the problem will occur.
$('li').each(function(){
  $(this).data('idx',c++);
  $(this).text(c);
})
c=0;

$( ".panel_list" ).sortable({
  placeholder: 'panel_highlight',
  tolerance  : 'pointer',
  axis       : 'y',
  opacity    : 0.9,
  items      : '>li.ticked',
  cancel     : '>li.unticked',
  start: function(event, ui){

    // LIST RELATED

    origValue = ui.item.data('idx');

    // CONSOLE RELATED

    $('.console').html(''); oldInfo=''; info='';
  },
  change: function(event, ui){

    // LIST RELATED

    var idx = ui.placeholder.prevAll().filter(':not(.ui-sortable-helper)').length;
    var a=ui.placeholder.index();
    var b=a+1;
    if(idx - $(this).data('idx')==1)
    {//downward dragging
      if((a<=origValue) || (x==1)){ui.item.text(b);x=0;}
      else					  				 {ui.item.text(a);};
    }
    else
    {//upward dragging
      if(a<=origValue)  			 {ui.item.text(b);x=1;}
      else					    			 {ui.item.text(a);};
    };
    $(this).data('idx', idx);

    //With or without this, the problem will occur.
    $('li').each(function(){
      if(ui.item.index() !=$(this).index()){
        $(this).data('idx',c++);
        $(this).text(c);
      }
    })
    c=0;

    // CONSOLE RELATED

    info=$('.console').html();
    if(oldInfo !=''){

      var valReal = parseInt(ui.item.text()) - parseInt(oldInfo);
      var valOld = parseInt(oldInfo);

      var valAbs= Math.abs( parseInt(ui.item.text()) - parseInt(oldInfo));
      if(valAbs==1){info=info+' + '+ui.item.text();}
      else{

				// ADDING THE SKIPPED ONES!
        if(valReal>0){
          for(i=valOld+1;i<valOld+valReal;i++){
            info=info+' + <span style="color:blue">'+( i )+'</span>';
          }
        }else{
          for(i=valOld-1;i>valOld+valReal;i--){
            info=info+' + <span style="color:green">'+( i )+'</span>';
          }
        }
        
        // The one caugth after a gap
        info=info+' + <span style="color:red">'+ui.item.text()+'</span>';
      };
    }
    else{info=ui.item.text();};
    $('.console').html(info);
    oldInfo = ui.item.text();
  }
});

.console{
  width:100%;
}

.panel ul{
	list-style-type:none;
  width:30%;
}

.panel li{
	height:29px;
	border-bottom:1px solid #454d5a;
  text-align: left;
  vertical-align: middle;
	line-height:29px;
	padding-left:8px;
	background: #666;
}


.panel_highlight{
    height:29px;
    background:#1c2128 !important;
}

.unticked{
	color:#7c7a7d;	
	background:#222 !important;
}


.ui-sortable-helper{
  background-color:red !important;
}

<link href="https://www.lexgotham.com/test5/styles/reset.css" rel="stylesheet"/>
<link href="https://www.lexgotham.com/test5/scripts/jQuery/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://www.lexgotham.com/test5/scripts/jQuery/jquery.3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<html>
<body>
  <div class="panel">
    <ul class="panel_list">
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="ticked"></li>
      <li class="unticked"></li>
      <li class="unticked"></li>
      <li class="unticked"></li>
    </ul>
  </div>
  <div class='console'></div>
</body>
</html>

Fiddle

Answer 2

上一个答案中的一些观察是正确的，但这是我的盐。顺便说一句，我确实认为这是“固定的”。

我认为有一个非常简单的解决方案。每次发生“跳过”时，可排序项都不会告诉您所有中间步骤，所以..为什么不构造它们？..

var origValue;
var oldInfo;
var info;
var c=0;
var x=0;

// LIST RELATED

//With or without this, the problem will occur.
$('li').each(function(){
    $(this).data('idx',c++);
    $(this).text(c);
})
c=0;

$( ".panel_list" ).sortable({
    placeholder: 'panel_highlight',
    tolerance  : 'pointer',
    axis       : 'y',
    opacity    : 0.9,
    items      : '>li.ticked',
    cancel     : '>li.unticked',
    start: function(event, ui){

    // LIST RELATED

                origValue = ui.item.data('idx');

        // CONSOLE RELATED

            $('.console').html(''); oldInfo=''; info='';
    },
    change: function(event, ui){

    // LIST RELATED

            var idx = ui.placeholder.prevAll().filter(':not(.ui-sortable-helper)').length;
            var a=ui.placeholder.index();
            var b=a+1;
            if(idx - $(this).data('idx')==1)
            {//downward dragging
            if((a<=origValue) || (x==1)){ui.item.text(b);x=0;}
                    else                                     {ui.item.text(a);};
            }
            else
            {//upward dragging
            if(a<=origValue)             {ui.item.text(b);x=1;}
            else                                     {ui.item.text(a);};
            };
            $(this).data('idx', idx);

            //With or without this, the problem will occur.
            $('li').each(function(){
          if(ui.item.index() !=$(this).index()){
               $(this).data('idx',c++);
               $(this).text(c);
              }
        })
            c=0;

        // CONSOLE RELATED

            info=$('.console').html();
            if(oldInfo !=''){
          oIv = parseInt(oldInfo);
          uiV = parseInt(ui.item.text());
          stepIn = (uiV > oIv ? 1 : -1);
          switch (stepIn) {
          case 1:
          for (i=oIv+1;i<uiV;i++) {info=info+' + <span style="color:green">'+i+'</span>';}
          break;
          case -1:
          for (i=uiV+1;i<=oIv;i++) {info=info+' + <span style="color:red">'+i+'</span>';}
          break;
          }
            }
            else{info=ui.item.text();};
            $('.console').html(info);
            oldInfo = ui.item.text();
    }
});

正如您在这里看到的，如果发生跳过，我只会将change事件遗漏的所有步骤添加到信息变量中...但是，可悲的是，这仍然行不通..原因很简单。重新输入变更事件。

现在，我没有时间编写有效的解决方案，但这是我的主意。每次更改事件结束时，必须使用缺少的中间值重建列表。这样，您就可以拥有连续的序列。因此，从您的原始代码开始，只需将一个方法添加到stop事件中即可，该方法基于通过更改创建的序列来填充中间值，瞧，您就拥有了序列。

让我知道这是否满足您的要求。

jQueryUI可排序和拖动速度问题

2 个答案: