HTML5 drag & drop: содержимое перетаскиваемого элемента отсутствует в браузерах Webkit - PullRequest
Новая
       12

HTML5 drag & drop: содержимое перетаскиваемого элемента отсутствует в браузерах Webkit

3 голосов
/ 25 декабря 2010

Я пытаюсь реализовать что-то похожее на корзину, где вы можете выбросить элементы из списка.Этот элемент (<li> elements) имеет несколько элементов внутри (div, span и тому подобное).Само перетаскивание отлично работает.Но изображение перетаскиваемого элемента не отображается в браузерах Webkit.

Мой элемент списка имеет рамку с цветом фона.В Firefox изображение - это целый элемент.В браузерах Webkit только перетаскиваемый элемент без содержимого.Я вижу фон и границу, но без текста внутри.

Я пытался сделать копию элемента и заставить его быть изображением, но не работает. 

var dt = ev.originalEvent.dataTransfer;
dt.setDragImage( $(ev.target).clone()[0], 0, 0);

У меня есть упрощенный пример, который демонстрирует такое же поведение: http://jsfiddle.net/ksnJf/1/

Ответы [ 2 ]

2 голосов
/ 25 декабря 2010

Использование addElement : 

dt.addElement(this);

вместо этого в событии dragstart . Но остерегайтесь прозрачного фона:)

Кстати, почему бы вам не использовать код из пример 1 или даже пример 2 ?

UPD: Для Webkit необходимо использовать свойство webkitUserDrag или эквивалентный CSS 

-webkit-user-drag: element; 
-webkit-user-select:none;

Существует пример копирования элементов LI из UL в DIV.

1 голос
/ 26 декабря 2010

Я только что проверил это.Оно работает!Но весь код в JS я тестировал тем или иным способом и у меня не работал.И тогда я увидел разницу.Используется в качестве обертки сделать магию.Это работает 

<li draggable="true" class="course" data-id="1">
    <div class="content">
      <div class="name">Agua Mineral</div>
      <div class="price">1.50</div>€
    </div>
</li>

Это не 

<li draggable="true" class="course" data-id="1">
      <div class="name">Agua Mineral</div>
      <div class="price">1.50</div>€
</li>

Я не знаю, является ли это ошибкой или преднамеренной, но в любом случае она несовместима в разных браузерахЯ спрошу о группе webkit.

Спасибо!

...