jQuery UI可排序-重叠50％似乎不起作用 [英] jQuery UI sortable - overlapping by 50% doesn't seem to work

问题描述

jQuery UI sortable插件旨在使一组DOM元素可排序.一个不错的演示位于官方网站此处

API文档提供了tolerance选项，并且说明中说:

指定用于测试正在移动的项目是否悬停在另一项目上方的模式.可能的值:相交，指针

此外，相交的描述(默认)是:

相交:该项目与另一项目重叠至少50％.

我希望，如果我拖动一个项目并将其移到另一项目上，它将检测到我会在高度的50％重叠时立即重新排序这些项目.但这似乎并不可行:(.即使您检查了官方演示，然后您尝试要将第一项拖到第二项上，您将看到第一项必须在第二个元素上拖动整个高度(例如其高度的100％)，然后才交换项的顺序.

我错过了什么吗?作为程序员，我有什么办法可以强迫插件按我预期的方式工作?我希望用户将第一个项目仅向下移动其高度的50％，以使插件能够检测到重叠并执行重新排序.

解决方案

简短的答案是:

有一个错误票，所以看来唯一的选择是某种形式解决方法.

以下是一种变通方法示例，其中使用了自定义排序功能，这似乎可以更好地回答您的问题.我还将保留下面的示例，以解决该问题.

...

这涵盖了单个方向的情况，但是如果要实现网格怎么办?

这是我编辑的变通小提琴(带有插入功能的网格示例):小提琴

注意:这不会交换块，而是将其插入并将其余部分推回.

以下是涉及的javascript/jQuery代码的片段，可模拟50％的覆盖率:

var height = $(".tab").height();
var height = $(".tab").width();

    $('#pointer').sortable({
        cursorAt: { top: height/2, left: width/2 },
        containment: 'parent',
        tolerance: 'pointer'
    });

jQuery UI sortable plugin is intended to enable a group of DOM elements to be sortable. A nice demo is at official website here

The API documentation provides tolerance option, and the description says:

Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values: intersect, pointer

Furthermore, the description of intersect (which is default) states:

intersect: The item overlaps the other item by at least 50%.

I expected, that if I drag one item, and move it over another item, it will detect that I'm reordering the items as soon as 50% of the height overlaps. But it doesn't seem to work this way :(. Even if you check the official demo, and you try to drag the 1st item over the 2nd item, you'll see that the 1st item has to be dragged for entire height, like 100% of its height, over the 2nd element, and only then the order of items is swapped.

Am I missing something? Is there any way for me as a programmer to force the plugin to work as I expect it to work? I wish the user to move the 1st item only 50% of its height down, in order for the plugin to detect overlapping and perform reordering.

解决方案

The short answer is:

There's a bug ticket for this, so it seems like the only option is some form of workaround.

Here's a workaround example that uses a custom sort function, which seemed to answer your question better. I'll keep the below example as well for another approach to the problem.

...

That covers the case with a single direction, but what if you want to implement a grid?

Here's a workaround fiddle that I edited (Grid example w/ insert): fiddle

Note: This doesn't swap blocks, it inserts them and pushes the rest back.

Here's a snip of the javascript / jQuery code involved that mocks 50% coverage:

var height = $(".tab").height();
var height = $(".tab").width();

    $('#pointer').sortable({
        cursorAt: { top: height/2, left: width/2 },
        containment: 'parent',
        tolerance: 'pointer'
    });

这篇关于jQuery UI可排序-重叠50％似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！