HTML5 Перетаскиваемый атрибут: предотвратить появление помощника

Question

Я создал этот маленький скрипт для создания перетаскиваемого DIV с использованием свойства dragabble в HTML5, все работает отлично, за исключением того хелпера, который появляется в конце перетаскивания. Есть ли способ предотвратить это?

http://jsfiddle.net/ubugnu/66AVB/

<div id="toBeDragged" style="position: absolute;" draggable="true"> 
    This text <strong>may</strong> be dragged. 
</div> 

<script> 
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) { 
    X = event.offsetX; 
    Y = event.offsetY; 
}); 
document.getElementById('toBeDragged').addEventListener('drag', function(event) { 
    this.style.left = event.pageX - X + 'px'; 
    this.style.top = event.pageY - Y + 'px'; 
}); 
</script> 

Edit: кажется, что он не работает на Firefox! У кого-нибудь есть идея, почему он не работает?

Answer 1

Ознакомьтесь с документами MDN по перетаскиванию.

Вам необходимо установить некоторые данные перетаскивания, чтобы Firefox знал, как отображать информацию о перетаскивании. Он нестандартен, что он работает в других браузерах.

Я обновил свою скрипку, добавив

event.dataTransfer.setData('text/html', 'This text <strong>may</strong> be dragged'); 

на мероприятие dragStart.

Смотрите, если это поведение, которое вы хотите: http://jsfiddle.net/66AVB/1/

Answer 2

Если вы могли бы использовать JQuery, почему бы просто не использовать JQuery UI, пока на него.

http://jsfiddle.net/66AVB/2/

весь код, который вам нужно это:

$('#toBeDragged').draggable();