Что-то не так с Html5 эффектом перетаскивания

Question

На одной панели несколько изображений, я хочу перетащить их на другую панель:

  $('#resource img').bind('dragstart', function (evt) {
        evt.dataTransfer.setData('text', this.id);
    });

другая панель принимает изображение следующим образом:

        $('#draw').bind('dragover', function (evt) {
            evt.preventDefault();
        }).bind('dragenter', function (evt) {
            evt.preventDefault();
        }).bind('drop', function (evt) {
            evt.preventDefault();
            var id = evt.dataTransfer.getData('text'),
            $(this).append("<b>Hello"+id+"</b>");
        });

однако это не работает, но когда я меняю обработчик последнего события:

.bind('drop', function (evt) {
                evt.preventDefault();
                  alert("!!!");
            });

это может сработать, почему это случилось, как я могу решить эту проблему?

Answer 1

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

evt.originalEvent.dataTransfer.setData('text', this.id);

Answer 2

Похоже, вы используете jQuery. Вы сказали jQuery передать свойство dataTransfer с событиями? jQuery не передает объект dataTransfer автоматически с событиями. Возможно, когда-нибудь это изменится, но в настоящее время этот обходной путь должен использоваться.

$(document).ready(function () {    
    $.event.props.push('dataTransfer');
}