hacer - javascript draggable

Arrastrar y soltar HTML5 no funciona en IE11

Question

Se ha aplicado arrastrar y soltar nativo de HTML5, drop no funciona con IE, funciona bien con Chrome y Firefox.

el arrastre parece estar funcionando, pero no está pasando desapercibido en IE.

Otra pequeña pregunta: en IE obtuve un cuadrado medio transparente alrededor de mi elemento arrastrable, pero su fondo es transparente (la imagen está hecha así), y en Chrome / Firefox no tengo ese cuadrado y la imagen se ve sin fondo mientras arrastro .

esta es el área de caída:

<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>

este es el elemento arrastrable:

<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>

function drag_start(e) 
    {
        e.dataTransfer.effectallowed = ''copy'';
        e.dataTransfer.dropEffect = ''copy'';
        e.dataTransfer.setData("text/plain", e.target.getAttribute(''id''));
    }

function drag_enter(e) {

        if (e.target.getAttribute(''data-droppable'') == ''true'') {
            e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
        }

function drag_leave(e) {

        if (e.target.getAttribute(''data-droppable'') == ''true'') {
            e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        }


function drag_drop(e) {
        var element = e.dataTransfer.getData("Text"); // the player
        if (e.preventDefault) {
            e.preventDefault();
        }
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (e.target.getAttribute(''id'') == "player1" || e.target.getAttribute(''id'') == "player2") {
            alert("invalid Move");
            return false;
        }

        e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        moveHandler(element, e.target.getAttribute(''id''));
    }

function drag_end(e) {
        e.dataTransfer.effectallowed = ''copy'';
        alert("drop end")
        }
    }
}

Elimino algunos códigos de material de impresión para hacer que el código sea más corto.

Answer 1

IE10 / 11 usa Text como cadena de datos y se rompe si usa texto / plain. Si usas el texto, se rompe en Firefox.

Entiendo esto haciendo algo como esto en las funciones de arrastrar y soltar que necesito escribir:

var setDataString = ''text/html'';
// We need to change the setDataString type for IE since IE doesn''t support setData and getData correctly. 
this.changeDataStringForIe = (function() {
    var userAgent = window.navigator.userAgent,
    msie = userAgent.indexOf(''MSIE ''),       //Detect IE
    trident = userAgent.indexOf(''Trident/''); //Detect IE 11

    if (msie > 0 || trident > 0) {
        setDataString = ''Text'';
        return true;
    } else {
        return false;
     }
})();

Me encantaría saber de una solución que no use el rastreo de UserAgent.

Answer 2

Está configurando datos de tipo text/plain , pero recuperando datos de tipo Text . Mientras que algunos navegadores pueden entender que sean uno y el mismo, otros pueden no. En este caso, parece que Internet Explorer está siendo pedante mientras que Chrome y Firefox son flojos.

Personalmente, sugeriría usar Text . Puede que sea antiguo, pero eso es lo que lo haría funcionar bien, incluso desde IE5, si la memoria funciona, dado algunos pequeños ajustes en el manejo del evento.

Answer 3

El problema es que el navegador tiene por defecto acciones de panoramización en lugar de acciones táctiles ... consulte http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx para obtener información sobre cómo para controlar la acción predeterminada en css.

Answer 4

Si alguien no arrastra y suelta en IE 8.1 W en 11 solo en la pestaña de Seguridad de Opciones de Internet y elimina el modo protegido de casilla de verificación o ejecuta IE como administrador