html5sortable - понимание элемента "призрак"
Я использую текущую поддерживаемую версию html5sortable, найденную здесь: https://github.com/voidberg/html5sortable
Если я загружаю включенную простую (не угловую) страницу примера HTML, я вижу два разных поведения для "призраков", которые прикрепляются к курсору во время операций перетаскивания:
В самом первом списке, когда вы перетаскиваете элемент в Chrome, призрак постепенно исчезает (градиент от оригинала до прозрачности) по краям.
В списке сетки, который инициализируется с теми же параметрами, призрак является просто слегка прозрачным клоном оригинала. Другими словами, он не исчезает как "градиент", весь элемент просто немного исчезает.
Я не могу понять, как намеренно получить это второе поведение. В моем приложении я продолжаю получать первое.
Я не мог понять из кода, как просто добавить призрак в 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 и не вижу ссылок ни на прозрачность, ни на градиенты.
-
В качестве альтернативы, если бы я мог выяснить, как добавить образец "призрака" в DOM, это было бы замечательно... но проверка DOM при перетаскивании заставляет меня поверить, что он в любом случае находится на уровне реализации браузера, а не на уровне DOM...?