6

JQuery UI Sortable 适用于没有间隙的列表,但是说我想呈现一个有间隙的项目列表,例如

1, 2, 空的, 4, 5, 6, 空的, 8

其中数字代表槽号。然后预期的行为是如果用户将一个元素拖到 2 槽上,2 值被推到空槽 3,用户可以将新元素放在 2 槽中,而如果他们将新元素拖到空 3 槽,列表项不会下推,用户只需将新项目放入空 3 槽。希望这是有道理的。

我一直在查看 JQuery UI 可排序代码,似乎我需要利用更改并接收回调来实现这一点,但是,一般来说,作为 JQuery/JS 的新手,我不清楚使用什么添加这些空插槽占位符并管理选择列表,这样我就不会使用自定义代码破坏排序功能。

任何指针、示例等将不胜感激。

在对此进行了一段时间的研究之后,我创建了一个 jsFiddle:http: //jsfiddle.net/pdHnX/

帮助解释问题。我相信我想要完成的所有事情都可以在重写的 _rearrange 方法中发生。小提琴代码处理项目替换填充项目的情况,但有一个奇怪的问题,如果您将项目从项目列表拖动到填充列表,放下项目,然后在填充列表中拖动相同的项目,填充列表缩小了1,这是一个问题。

一旦您开始将更多项目拖到填充列表中,就会出现更多问题,但这就是我目前遇到的问题。

4

3 回答 3

9

我不确定我是否理解正确,但这是我想出的:

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
        this.innerHTML = '';                                                        // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

假设:

  • 如果您从顶部列表中拖动项目 - 它将被“克隆”(原始将保留在列表中)
  • 如果您从底部列表中拖动项目 - 它会移动(留下空占位符)
  • 如果您将任何项目放在底部列表的占位符上 - 它将替换占位符
  • 如果您将任何项目放在底部列表的非空占位符/项目上-它将替换它
  • 两个列表的大小始终保持不变

让我知道这是否有帮助,或者您是否正在寻找其他东西。还解释整个任务(这个拖动的目的是什么)可能会有所帮助:-)

于 2012-09-06T10:05:07.867 回答
1

抱歉,这是一个很难详细说明的问题。这些要求非常具体,难以描述。

这是我正在寻找的解决方案。

这里的其他答案虽然可能是对描述不佳的问题的解决方案,但并不是我想要的。

http://jsfiddle.net/vfezJ/

不幸的是,sortable.js 代码非常繁琐,因此那里链接的代码也非常繁琐。我发布的解决方案还对 CSS 类和 DOM id 进行了一些假设以完成工作。

于 2012-09-14T15:27:00.160 回答
0

http://jsbin.com/igozat/2

这是我掀起的东西。它并不完美,也不值得称赞,因为 sortable() 不能在拖动中被打断。如果这是可能的,那么丢弃操作可以完全接管。此外,我重新排序的尝试是错误的。我知道这种方法只适用于普通的 jQuery,但它不适用于 jQuery UI,这让我很生气。

冒着听起来像个混蛋的风险,如果是我,我会只用 jQuery 编写功能。jQuery UI 并不像它想象的那样。:P

于 2012-09-11T17:49:40.207 回答