当前位置： 文江博客话题详情

jquery 在可排序中交换排序

发布于 2024-12-17 04:47:51 字数 4894 浏览 2 评论 0原文

好吧，我正在研究一个问题，但问题消失了，所以我只是在做一些事情。仅供参考，这不是首要任务，所以不要觉得有义务。

不管怎样，我需要一些关于如何处理这个问题的建议，因为我无法让它正常工作。我已将节点交换下来，但无法将其正确交换回来。我认为我没有正确处理这些因素。

第一步是与正在移动的元素进行交换，所以基本上：

1 2 3 4 5

如果 1 超过 2 那么（x 保存 1 的单元格）：

2 X 3 4 5

如果 1 超过 3 那么：

3 2 X 4 5

这是我到目前为止所拥有的。 “sortable”（$）中

_NodeHold_pos: false,

// return what n1 get's replaced with
nodeSwap: function( n1, n2) {
    // not null and not same node and both have parents
    //  hmm, !n1.isSameNode(n2) doesn't work here for some reason
    if ( n1 && n2 && n1 != n2 && n1.parentNode && n2.parentNode ) {
        // if they don't have same parent, we need to make sure they don't contain each other (untested)
        if ( !n1.parentNode.isSameNode(n2.parentNode) ) {
            prnt = n1.parentNode;
            while ( prnt ) {
                if ( prnt.isSameNode(n2) ) return;
            }
            prnt = n2.parentNode;
            while ( prnt ) {
                if ( prnt.isSameNode(n1) ) return;
            }
        }
        n1h = n1.cloneNode(true);
        n1.parentNode.replaceChild(n1h,n1);
        n2.parentNode.replaceChild(n1,n2);
        n1h.parentNode.replaceChild(n2,n1h);
        //sn2.parentNode.removeChild(n1h);
        return n2;
    }
    return n1;
},

_rearrange2: function(event, i) {
    var n1 = this.placeholder[0];
    var n2 = (this.direction == 'down' || !i.item[0].nextSibling? i.item[0] : i.item[0].nextSibling);

    if ( n2 && !this._NodeHold_pos) {
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else if ( n2 ) {
        var hold = n1;
        this.nodeSwap(n1,this._NodeHold_pos);
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    }

    //Various things done here to improve the performance:
    // 1. we create a setTimeout, that calls refreshPositions
    // 2. on the instance, we have a counter variable, that get's higher after every append
    // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
    // 4. this lets only the last addition to the timeout stack through
    this.counter = this.counter ? ++this.counter : 1;
    var self = this, counter = this.counter;

    window.setTimeout(function() {
        if(counter == self.counter) self.refreshPositions(true); //Precompute after each DOM insertion, NOT on mousemove
    },0);
},

在函数“_mouseDrag”中的

                //* <-- add '/' in front for this or remove for next
                this._rearrange(event, item);
                /*/
                this._rearrange2(event,item);
                //*/

，替换“_rearrange”调用将切换以在函数“_mouseStop”中添加“_rearrange2”，将“_NodeHold_pos”设置回 false

我认为这就是我所做的全部设置它。不管怎样，测试了交换并且似乎有效，但是当我尝试交换回来时，我不断收到发送的空节点，并且它们因此而不断卡住。我认为这也会导致奇怪的行为，所以不确定该去哪里。

哦，html（这是来自演示）：

<html>
<head>
<script src="../jquery-1.7.min.js" type="text/javascript"></script>
<script src="../jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../jquery-ui-1.8.16.custom.css"></link>
<script src="../jquery/development-bundle/ui/jquery.ui.sortable.js" type="text/javascript"></script>
</head>
<body>
<meta charset="utf-8">
    <style>
    #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
    #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
    </style>
<script>
    $(function() {
        $( "#sortable2" ).sortable({ tolerance: 'pointer',
            //items: "li:not(.ui-state-disabled)",
            cancel: ".ui-state-disabled",
        });
        $( "#sortable2 li" ).disableSelection();
    });
</script>
<div class="demo">
<h3 class="docs">Cancel sorting (but keep as drop targets):</h3>

<ul id="sortable2">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
    <li class="ui-state-default">Item 4</li>
</ul>

</div>
</body>
</html>

编辑：如果您注释掉rearrange2中的一部分（并调用它）并调用swap：

    this.nodeSwap(n1,n2);
    /*
    if ( n2 && !this._NodeHold_pos) {
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else if ( n2 ) {
        var hold = n1;
        this.nodeSwap(n1,this._NodeHold_pos);
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    }
    */

您可以看到swap是有效的。也许我应该先解决这个问题。它有时会挂起，有时只是推动所有内容，但在大多数情况下都有效。测试时，即使我可以看到节点，它们有时也会未定义。我需要刷新 DOM 还是什么？

原文

Ok, I was working on a question, but the question disappeared, so I'm just working on making something regardless. FYI, it's not top priority, so don't feel obligated.

Either way, I need some advice on where to go with this, because I can't get it to work correctly. I have the node swap down, but can't get it to swap back properly. I don't think I'm handling the elements properly.

The first step was to get a swap going with the element that is moving, so basically:

1 2 3 4 5

if 1 is over 2 then (x is holding cell for 1):

2 X 3 4 5

if 1 is over 3 then:

3 2 X 4 5

This is what I have so far. In "sortable" (the $)

_NodeHold_pos: false,

// return what n1 get's replaced with
nodeSwap: function( n1, n2) {
    // not null and not same node and both have parents
    //  hmm, !n1.isSameNode(n2) doesn't work here for some reason
    if ( n1 && n2 && n1 != n2 && n1.parentNode && n2.parentNode ) {
        // if they don't have same parent, we need to make sure they don't contain each other (untested)
        if ( !n1.parentNode.isSameNode(n2.parentNode) ) {
            prnt = n1.parentNode;
            while ( prnt ) {
                if ( prnt.isSameNode(n2) ) return;
            }
            prnt = n2.parentNode;
            while ( prnt ) {
                if ( prnt.isSameNode(n1) ) return;
            }
        }
        n1h = n1.cloneNode(true);
        n1.parentNode.replaceChild(n1h,n1);
        n2.parentNode.replaceChild(n1,n2);
        n1h.parentNode.replaceChild(n2,n1h);
        //sn2.parentNode.removeChild(n1h);
        return n2;
    }
    return n1;
},

_rearrange2: function(event, i) {
    var n1 = this.placeholder[0];
    var n2 = (this.direction == 'down' || !i.item[0].nextSibling? i.item[0] : i.item[0].nextSibling);

    if ( n2 && !this._NodeHold_pos) {
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else if ( n2 ) {
        var hold = n1;
        this.nodeSwap(n1,this._NodeHold_pos);
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    }

    //Various things done here to improve the performance:
    // 1. we create a setTimeout, that calls refreshPositions
    // 2. on the instance, we have a counter variable, that get's higher after every append
    // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
    // 4. this lets only the last addition to the timeout stack through
    this.counter = this.counter ? ++this.counter : 1;
    var self = this, counter = this.counter;

    window.setTimeout(function() {
        if(counter == self.counter) self.refreshPositions(true); //Precompute after each DOM insertion, NOT on mousemove
    },0);
},

in the function "_mouseDrag", replaced "_rearrange" call will a toggle to add "_rearrange2"

                //* <-- add '/' in front for this or remove for next
                this._rearrange(event, item);
                /*/
                this._rearrange2(event,item);
                //*/

in the function "_mouseStop", set "_NodeHold_pos" back to false

I think that was all I did to set it up. Either way, tested out the swap and seems to work, but when I try to swap back, I keep getting null nodes sent and they keep getting stuck because of it. I think that causes the odd behavior as well, so unsure where to go with this.

Oh, the html (this is from a demo):

<html>
<head>
<script src="../jquery-1.7.min.js" type="text/javascript"></script>
<script src="../jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../jquery-ui-1.8.16.custom.css"></link>
<script src="../jquery/development-bundle/ui/jquery.ui.sortable.js" type="text/javascript"></script>
</head>
<body>
<meta charset="utf-8">
    <style>
    #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
    #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
    </style>
<script>
    $(function() {
        $( "#sortable2" ).sortable({ tolerance: 'pointer',
            //items: "li:not(.ui-state-disabled)",
            cancel: ".ui-state-disabled",
        });
        $( "#sortable2 li" ).disableSelection();
    });
</script>
<div class="demo">
<h3 class="docs">Cancel sorting (but keep as drop targets):</h3>

<ul id="sortable2">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
    <li class="ui-state-default">Item 4</li>
</ul>

</div>
</body>
</html>

edit: if you comment out a part in rearrange2 (and have it being called) and just call swap:

    this.nodeSwap(n1,n2);
    /*
    if ( n2 && !this._NodeHold_pos) {
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else if ( n2 ) {
        var hold = n1;
        this.nodeSwap(n1,this._NodeHold_pos);
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    }
    */

You can see that swap sort of works. Maybe I should work that out first. It hangs sometimes and sometimes just pushes everything, but works for the most part. When testing, the nodes sometimes come undefined even when I can see them. Do I have to refresh the DOM or something?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

苏大泽ㄣ 2024-12-24 04:47:51

嗯，好久没联系了，也没人回复。好的，我使交换功能起作用了。最大的问题是，重新排列是从一些我没有看到的地方调用的（这就是为什么我删除了传递给函数的两个变量），并且 n2 被设置为不同类型的排序。另外，根据我对 JQuery 设置的了解，交换不需要检查父级。

为了进行设置，这里是我用于测试的 html：

<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery-ui-1.8.16.custom.css"></link>
<!-- this is from the development bundle so that it can be seen easier -->
<script src="jquery.ui.sortable.js" type="text/javascript"></script>
<meta charset="utf-8">
<style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
#sortable1 li { margin: 0 5px 5px 5px; padding: 3px; width: 40%; }
#sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 30%; }
</style>
<script>
    $(function() {
        $( ".sortable" ).sortable({ tolerance: 'pointer',cancel: ".ui-state-disabled",});
        $( ".sortable li" ).disableSelection();
    });
</script>
</head>
<body>
<ul class="sortable" id="sortable1">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable 1)</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable 2)</li>
    <li class="ui-state-default">Item 4</li>
    <ul class="sortable" id="sortable2">
        <li class="ui-state-default">sub 2</li>
        <li class="ui-state-default">sub 3</li>
    </ul>
</ul>
</body>
</html>

我还使用了一些子节点来测试其他一些东西。

在我包含的文件 jquery.ui.sortable.js 中，我进行了以下更改。

对于函数 _rearrange，我替换为以下内容：

_NodeHold_pos: false,

// return what n1 get's swapped with
nodeSwap: function( n1, n2 ) {
    if ( n1 && n2 && n1 !== n2 ) {
        var n1h = n1.cloneNode(false);
        n1.parentNode.replaceChild(n1h,n1);
        n2.parentNode.replaceChild(n1,n2);
        n1h.parentNode.replaceChild(n2,n1h);
        return n2;
    }
    return n1;
},

// _rearrange rework for specific sort
_rearrange: function(event, i, a, hardRefresh) {

    if ( a ) {
        a[0].appendChild(this.placeholder[0]);
        return;
    }

    var n1 = this.placeholder[0];
    var n2 = i.item[0];
    /*
    // swap in place, from where you were last (during mouseovers)
    this.nodeSwap(n1,n2);
    /*/
    // swap from original position (before picking up node)
    if ( this._NodeHold_pos === false ) {
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else if ( n2 === this._NodeHold_pos ) {
        this.nodeSwap(n1,n2);
        this._NodeHold_pos = false;
    } else if ( n1 !== this._NodeHold_pos ) {
        this.nodeSwap(n1,this._NodeHold_pos);
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else {
        alert("here");
        this._NodeHold_pos = false; // shouldn't really reach this
    }
    //*/
    this.counter = this.counter ? ++this.counter : 1;
    var self = this, counter = this.counter;

    window.setTimeout(function(){
        if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
    },0);
},

我将此行添加到 _mousestop:

this._NodeHold_pos = false;

现在工作正常。我使用了两种不同的交换（因为我不知道会出现什么问题），但两者似乎工作原理相同，所以只选择了代码较少的一个。

我还没有真正回答完我开始提出的原始问题，但这是有效的，所以这个问题得到了回答。

Well, haven't touched in a while, and since nobody is answering. Ok, I made the swap function work. The biggest problem was that rearrange was being called from a few places that I didn't see (which is why I dropped two variables passed to the function) and that n2 was being set for a different type of sort. Plus, the swap didn't need to check for parents from what I can tell of JQuery's setup.

To set it up, here is the html that I used for test:

<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery-ui-1.8.16.custom.css"></link>
<!-- this is from the development bundle so that it can be seen easier -->
<script src="jquery.ui.sortable.js" type="text/javascript"></script>
<meta charset="utf-8">
<style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
#sortable1 li { margin: 0 5px 5px 5px; padding: 3px; width: 40%; }
#sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 30%; }
</style>
<script>
    $(function() {
        $( ".sortable" ).sortable({ tolerance: 'pointer',cancel: ".ui-state-disabled",});
        $( ".sortable li" ).disableSelection();
    });
</script>
</head>
<body>
<ul class="sortable" id="sortable1">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable 1)</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable 2)</li>
    <li class="ui-state-default">Item 4</li>
    <ul class="sortable" id="sortable2">
        <li class="ui-state-default">sub 2</li>
        <li class="ui-state-default">sub 3</li>
    </ul>
</ul>
</body>
</html>

I used some sub nodes to test for some other things as well.

Within the file jquery.ui.sortable.js that I included, I made the following changes.

For the function _rearrange, I replaced with the following:

_NodeHold_pos: false,

// return what n1 get's swapped with
nodeSwap: function( n1, n2 ) {
    if ( n1 && n2 && n1 !== n2 ) {
        var n1h = n1.cloneNode(false);
        n1.parentNode.replaceChild(n1h,n1);
        n2.parentNode.replaceChild(n1,n2);
        n1h.parentNode.replaceChild(n2,n1h);
        return n2;
    }
    return n1;
},

// _rearrange rework for specific sort
_rearrange: function(event, i, a, hardRefresh) {

    if ( a ) {
        a[0].appendChild(this.placeholder[0]);
        return;
    }

    var n1 = this.placeholder[0];
    var n2 = i.item[0];
    /*
    // swap in place, from where you were last (during mouseovers)
    this.nodeSwap(n1,n2);
    /*/
    // swap from original position (before picking up node)
    if ( this._NodeHold_pos === false ) {
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else if ( n2 === this._NodeHold_pos ) {
        this.nodeSwap(n1,n2);
        this._NodeHold_pos = false;
    } else if ( n1 !== this._NodeHold_pos ) {
        this.nodeSwap(n1,this._NodeHold_pos);
        this._NodeHold_pos = this.nodeSwap(n1,n2);
    } else {
        alert("here");
        this._NodeHold_pos = false; // shouldn't really reach this
    }
    //*/
    this.counter = this.counter ? ++this.counter : 1;
    var self = this, counter = this.counter;

    window.setTimeout(function(){
        if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
    },0);
},

I added this line to _mousestop:

this._NodeHold_pos = false;

Works fine now. I used two different swaps (because I didn't know what was going to be buggy), but both seem to work the same, so just picked the one with less code.

I'm not really done answering the original question that I started out, but this is working, so this question is answered.

回复 原文
~没有更多了~

关于作者

年华零落成诗

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文