个人中心
gpt4 book ai didi

jQueryUI 可排序和拖动速度问题

转载 作者：行者123 更新时间：2023-12-03 22:32:30 26 4
gpt4 key购买 nike

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

但它只能从缓慢到正常的阻力可靠地工作。在这些速度下，没有任何错误。但是如果用户相对较快地拖动元素(列表越大，它发生的频率就越高，因为鼠标有更多的空间来获得速度)，“change”事件会失去对某些步骤的跟踪，因此，一些有用的信息也会随之丢失在控制台中没有抛出错误的方式。

显示问题:

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

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

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

enter image description here

脚本:

其中一半是关于跟踪索引，因为 Sortable 有一种特殊的方式来引用索引，该索引取决于方向(向上/向下)，但也取决于元素相对于其初始位置(之前/之后)的当前位置。因此，从视觉上理解这些索引所需的代码量最少。使用该脚本，元素会以有序的方式获得直观的视觉索引，这是您希望看到的索引。

然而，这个脚本是问题的展示，可能不是问题(见下面的附注)。

脚本的另一半只是模拟一种用于调试目的的控制台。

我的猜测:

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

我认为这是其中一种情况，因为无论我尝试在“更改”事件中使用什么代码，我最终都会遇到此间隙问题。

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

最佳答案

上一个答案中的一些观察结果是正确的，但这是我的看法。顺便说一句，我确实相信这是“可修复的”..

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

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

正如您在此处看到的，如果发生跳过，我只会将更改事件遗漏的所有步骤添加到信息变量中……但是，遗憾的是，这仍然不起作用……原因很简单……重新进入更改事件。

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

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

关于jQueryUI 可排序和拖动速度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55173539/

26 4 0
文章推荐： jquery - 流程图显示 "$.plot is not a function"
文章推荐： jquery - 在 Symfony2 实体字段中添加 JQuery 自动完成
文章推荐： javascript - 如何通过 API 调用附加到 WordPress 定制器中的选择框？
文章推荐： javascript - 如何用文本替换播放/暂停图标切换
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com