Internet Explorer 9 Drag and Drop (DnD)

Кто-нибудь знает, почему следующие примеры перетаскивания веб-сайта (плюс много других обучающих программ в Интернете) не работают в Internet Explorer 9? Chrome, FireFox и Safari все в порядке.

http://www.html5rocks.com/tutorials/dnd/basics/

Я думал, что IE9 должен быть самым совместимым с HTML5 браузером? Особенно с DnD, так как они поддерживали его с IE5. Нужно ли менять настройки где-нибудь?

Чем больше я играю с HTML5 и CSS3... чем больше IE9, тем меньше.

Есть ли у кого-нибудь ссылки на учебники DnD, которые работают в IE9?

Ответы

Ответ 1

Ну, я столкнулся с этим же странным поведением в IE9, похоже, что IE9 не будет использовать Drag and Drop (стиль HTML 5) в div. если вы измените div для A с помощью href= "#", вы сможете перетащить.

это не будет перетаскиваться:

<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>

и это будет:

<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>

Надеюсь, это поможет кому-то

Ответ 2

Я нашел рабочий стол, чтобы сделать native dnd api также работать в IE с элементами, отличными от ссылок и изображений. Добавьте обработчик onmousemove в перетаскиваемый контейнер и вызовите собственную функцию IE element.dragDrop(), когда нажата кнопка:

function handleDragMouseMove(e) {
    var target = e.target;
    if (window.event.button === 1) {
        target.dragDrop();
    }
}

var container = document.getElementById('widget');
if (container.dragDrop) {
    $(container).bind('mousemove', handleDragMouseMove);
}

// todo: add dragstart, dragover,... event handlers

Ответ 3

Я столкнулся с той же проблемой. Этот трюк работает для меня:

node.addEventListener('selectstart', function(evt) {
    this.dragDrop();
    return false;
}, false);

Он останавливает выбор и начинает перетаскивание.

Ответ 4

Этот пример DnD работает в IE9.

Я думаю, пример из HTML5Rocks не работает в IE9 из-за особенностей CSS3. В примере использовались несколько функций CSS3, но поддержка IE9 CSS3 не очень хороша.

Кроме того, некоторые события и методы JS не работают в IE. Например, setDragImage() не работает даже в IE9. Это также одна из причин.

Ответ 5

Я тоже смотрел на это, я обнаружил, что Opera 11.50 имеет ту же основную проблему; и он, и IE9 не понимают атрибут перетаскивания HTML5, а также события перетаскивания HTML5.

В качестве обходного пути я нашел эту оперную статью в http://dev.opera.com/articles/view/accessible-drag-and-drop/, которая эмулирует поддержку перетаскивания с помощью мыши, mouseover, mousemove, mouseout и mouseup. Естественно, это очень много работы, но это дает вам поддержку dnd в Opera.

Вы можете увидеть живое демо на http://devfiles.myopera.com/articles/735/example.html

Тот же трюк с эмуляцией dnd работает с IE9 и выглядит совместимым с другими браузерами HTML5.

Ответ 7

У меня такая же проблема, как и Дидье Карон выше. Draggable div не работает, но теги привязки работают нормально. Я нашел решение в HTML5 Doctor.

Ответ 8

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

Ответ 9

Это работает для меня. Это приводит к тому, что IE9 ведет себя как другие современные браузеры с точки зрения перетаскивания:

if (document.doctype && navigator.appVersion.indexOf("MSIE 9") > -1) {
    document.addEventListener('selectstart', function (e) {
        for (var el = e.target; el; el = el.parentNode) {
            if (el.attributes && el.attributes['draggable']) {
                e.preventDefault();
                e.stopImmediatePropagation();
                el.dragDrop();
                return false;
            }
        }
    });
}