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...?

0 ответов

Другие вопросы по тегам