Я заметил, что и Chrome, и Firefox будут отображать призрачное изображение перетаскиваемого объекта по-разному в зависимости от ширины исходного элемента: http://jsfiddle.net/Eydnf/1/

<div draggable="true" style="width:230px">Example 1</div>
<div draggable="true" style="width:240px">Example 2</div>

Первый из этих DIV будет полупрозрачным, тогда как второй будет отображаться с прозрачностью кругового градиента. Излишне говорить, что такая непоследовательность в представлении очень нежелательна (не говоря уже о том, что второй DIV будет трудно увидеть, если вы возьмете его за угол). Как я могу гарантировать, что фантомное изображение всегда отображается с равномерной прозрачностью, независимо от его ширины?

0
Pasha 7 Июл 2014 в 23:52

2 ответа

Лучший ответ

Чтобы обеспечить единообразие перетаскивания, я создал плагин jQuery под названием Dragg.js, который будет использоваться вместо перетаскивания HTML5.

<div class="draggable" style="width:230px">Example 1</div>
<div class="draggable" style="width:240px">Example 2</div>
<script>
    $('.draggable').dragg();
</script>

Вот JSFiddle и вот документация плагина

Надеюсь, это поможет решить вашу проблему.

2
Tony Morello 8 Июл 2014 в 02:00

Следующий ответ может помочь некоторым, но не всем. В моем случае один из перетаскиваемых div был чуть выше предела, в котором устанавливается прозрачность кругового градиента. Размер div был 250 пикселей, а предел - 249.

Я решил это, добавив класс .dragged при перетаскивании в div с максимальной высотой, установленной на 239 пикселей.

В моем случае это работает нормально, но я полагаю, что когда элементы намного больше, эффект не будет хорошо выглядеть.

0
Erik 20 Ноя 2020 в 10:31