Question

我正在使用当前维护的html5sortable版本，可在此处找到：https://github.com/voidberg/html5sortable

如果我加载包含的普通（非Angular）HTML示例页面，我会看到在拖动操作期间附加到游标的“ghosts”的两种不同行为：

在第一个列表中，当你在Chrome中拖动一个项目时，幽灵会在边缘周围变为空白（从原始到透明的渐变）。

在使用相同选项初始化的网格列表中，ghost只是原始的略微透明的克隆。换句话说，它不会褪色为“渐变”，整个元素只会稍微消失。

我无法弄清楚如何有意识地获得第二种行为。在我的应用程序中，我不断获得第一个。

我无法从代码中辨别出如何向DOM添加一个幽灵。它是在浏览器API级别创建的吗？（与jQuery UI相比，它实际上是一个附加到文档的新元素）。我确实发现了一个用于一般造型目的的课程;但是，即使这种风格不包含“淡化到透明边缘”的效果，也有一种效果。

通常情况下，我很乐意将它写入HTML5实现，只为我做“做”但我可以在同一页面上看到相同JS初始化的同一浏览器中的示例（另一个示例是连接列表）其中淡入淡出不会发生。我一定错过了一些明显的东西！

FWIW，我的标记看起来像这样：

<ul id="available" class="source connected">              
    <li>item 1</li>
    <li>item 2</li>
</ul>
<ul id="active" class="target connected">              
    <li>item 3</li>
    <li>item 4</li>
</ul>

我的初始化看起来像这样：

$(".source, .target").sortable({
    connectWith: ".connected",
});

我有一些风格，但没有一种包括渐变甚至透明度。我已经查看了html5sortable源代码，并且看到了对透明度和渐变的引用。

-

或者，如果我能弄清楚如何将一个示例“ghost”附加到DOM，那将会很棒......但是在拖拽上检查DOM会让我相信它是在浏览器实现级别而不是DOM无论如何......？

html5sortable - 理解“幽灵”元素

0 个答案: