Internet Explorer 9 Drag and Drop (DnD)

Question

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

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

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

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

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

Answer 1

Я нашел обходной путь для того, чтобы родной 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

Answer 2

Ну, я столкнулся с таким же странным поведением в IE9, похоже, что IE9 не будет выполнять перетаскивание (стиль 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>

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

Это работает для меня. Это делает 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;
            }
        }
    });
}

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

Answer 9

Я бы предложил использовать перетаскиваемый jQuery UI .