Javascript для перетаскивания в HTML5 - PullRequest
Новая
       21

Javascript для перетаскивания в HTML5

7 голосов
/ 19 ноября 2011

Попытка сделать простой пример перетаскивания в HTML5 - но когда я перетаскиваю изображение в элемент div, я получаю следующую ошибку.

Uncaught TypeError: Невозможно установить для свойства 'innerHTML' значение null

Итак, я предполагаю, что сообщение об ошибке означает, что dragElement имеет значение null. Хотя я не понимаю почему, потому что я установил в событии dragstart HTML-код элемента img.

Кто-нибудь знает, как заставить это работать? 

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
});

$('#drop-box').bind('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#drop-box').bind('drop', function (e) {
    e.preventDefault();
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
    }

    return false;
});

1 Ответ

20 голосов
/ 19 ноября 2011

dataTransfer является частью исходного объекта события, а не объекта jQuery.Вместо этого используйте e.originalEvent: http://jsfiddle.net/KWut6/.

 e.originalEvent.dataTransfer ...

HTML 

<image src="http://lorempixum.com/100/100/" draggable="true" id="x">
<div id="drop-box">a</div>

JavaScript 

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.originalEvent.dataTransfer.effectAllowed = 'move';
    e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
});

$('#drop-box').bind('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#drop-box').bind('drop', function (e) {
    e.preventDefault();
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
    }

    return false;
});
...