JavaScript HTML5: проблема с перетаскиванием для gmail-подобного интерфейса загрузки - PullRequest
Новая
       27

JavaScript HTML5: проблема с перетаскиванием для gmail-подобного интерфейса загрузки

2 голосов
/ 06 января 2012

Скриншот моего интерфейса:

enter image description here

Каждый элемент дерева представляет собой <li> и <a>.

Каждая папка являетсяdropzone для загрузки файла, например перетаскивание в gmail.

Когда я "перетаскиваю" вход в папку с файлом на моем компьютере, я добавляю стиль:

enter image description here

Код для этого: 

var dropZoneElement = document.getElementById($this.attr('id'));

dropZoneElement.addEventListener('dragenter', onDragEnter, false);
dropZoneElement.addEventListener('dragleave', onDragLeave, false);
dropZoneElement.addEventListener('drop', onDrop, false);

function onDragEnter(event) {
  event.preventDefault();
  event.stopPropagation();
  $this.addClass('gmail-like');
}

function onDragLeave(event) {...}
function onDrop(event) {...}

Но проблема в том, что когда я перетаскиваю ссылку (<a>) на папку (даже фальшивую ссылку test без назначения)см. скриншот), на странице добавляется стиль для загрузки (нет загрузки, это просто визуально):

enter image description here

  • Почему?
  • Любая идеяотключить это?

Мне бы хотелось, чтобы стиль применялся только при перетаскивании файла с моего компьютера.

1 Ответ

2 голосов
/ 06 января 2012

По сути, вам нужно проверить drag data item kind и убедиться, что это действительно файл, а не что-то еще. Также вы можете отключить

Взгляните на HTML5 черновик , описывающий процесс перетаскивания. Этот учебник также может помочь.

Наконец, вопрос после SO должен дать вам несколько конкретных советов.

...