javascript, перетаскивающий файл с рабочего стола: dragenter / dragleave вызывает некорректно

Question

Сделал для этого скрипку: http://jsfiddle.net/terjeto/MN4FJ/

Моя проблема в том, что перетаскивание срабатывает, когда вы перетаскиваете файл с рабочего стола в поле и поверх текста внутри поля. (перетаскивание файла в поле сделает границу сплошной -> перетащите файл поверх текста внутри поля, и граница будет пунктирной: -> это не то, что я хочу).

Это ошибка браузера? (firefox 9 @ win).

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

Как мне добиться правильного поведения перетаскивания / перетаскивания?

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

Answer 1

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

Answer 2

Это хорошо документированный недостаток спецификации. Как указывает Петер-Поль Кох

Подобная функция может помочь вам сработать, если целевой элемент является дочерним по отношению к целевой области, на которую вы хотите перетащить файл.

function isChildElement(parent, child) {
    var childParent = child;
    while (childParent) {
        if (childParent == parent) {
           return true;
        }
        childParent = childParent.parentNode;
    }
    return false;
},

Answer 3

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

Я слушаю dragenter события на контейнере (коробке) моих возможных дропзон. События запускаются всякий раз, когда перетаскивание перемещается от одного элемента к другому и попадает в контейнер. Когда целью является одна из моих зон перетаскивания (или, возможно, ребенок в зоне перетаскивания, но в моем случае это не было необходимо, так как вы не можете добраться до детей, не войдя сначала в окружающее поле), тогда я устанавливаю подсвечиваемую подсветку как обычно.

Когда событие dragenter запускается на самом контейнере, я удаляю выделение из предыдущего элемента, потому что я, должно быть, оставил его. Для события dragenter был выделен элемент relatedTarget, поэтому его легко найти, и для прослушивателя событий dragleave нет необходимости.

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

Answer 4

У меня была такая же проблема, и я наконец нашел стабильное решение.Вот плагин draghover, который работает в кросс-браузерах.Проверьте это здесь: https://github.com/bingjie2680/jquery-draghover