Parece que un elemento de entrada pierde mucha funcionalidad cuando se pone en un elemento draggable=»true». Esto sólo parece ocurrir en firefox.

Ver a mi jsfiddle:
http://jsfiddle.net/WC9Fe/3/

Html:

<div id="drag" draggable="true">
    Drag this div <br />
    <input id="message" type="text" />
</div>
<div id="drop">
    Drop area
</div>

JS:

$('#drag').on('dragstart', function(e){
    e.originalEvent.dataTransfer.setData('Text', $('#message').val());
    e.originalEvent.dataTransfer.effectAllowed = 'move';
});

var drop = $('#drop');
drop.on('dragover', function(e){
    e.preventDefault();
});
drop.on('dragenter', function(e){
    e.preventDefault();
});
drop.on('drop', function(e){
    alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
    e.preventDefault();
});

Ahora intente seleccionar texto en la señal de entrada usando firefox. Parece imposible. Tratar de la misma en IE/Chrome. Parece que funciona muy bien.

  • Este problema se observa también en IE… es decir 11.0.9600 para ser exactos..
InformationsquelleAutor nicojs | 2014-02-10

4 Comentarios

  1. 12

    Que yo sepa este es un error conocido en FF. Una rápida (y «sucio» solución) sería eliminar la draggable atributo de entrada de texto focus evento, añadir de nuevo en la entrada de texto blur evento, y desactivar la selección de texto en #arrastre div permite arrastrar una vez que usted hace clic fuera el centrado de entrada (click en #div directamente).

    Actualizado el violín aquí.

    Código de ejemplo:

    JS:

    $('#message')
        .on('focus', function(e) {
            $(this).closest('#drag').attr("draggable", false);
        })
        .on('blur', function(e) {
            $(this).closest('#drag').attr("draggable", true);
        });

    CSS:

    .disable-selection {
        /* event if these are not necessary, let's just add them */
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    
        /* this will add drag availability once you clicked the 
           #drag div while you're focusing #message div */
        -moz-user-select: none;
    }

    La esperanza de que pueda ayudar.

    • Gracias! Una mala solución, de hecho… por ahora: he quitado el elemento de entrada desde la que se pueden arrastrar de la zona, como yo no lograr el efecto deseado en todos los navegadores (IE8 todavía era un problema). Le aconsejarías contra el uso de html5 arrastrar y soltar y el uso de JQuery interfaz de usuario de arrastrar y colocar en su lugar?
    • Usted puede encontrar más información mediante la lectura de: ventajas de html5 arrastrar y soltar sobre jquery interfaz de usuario de arrastrar y soltar y de html5 vs jquery interfaz de usuario de arrastrar y soltar. Si usted necesita para centrarse en una amplia gama de navegadores (legado de los navegadores también), si no desea que los dolores de cabeza y si estás corto de tiempo, me gustaría recomendar el uso de jQuery interfaz de usuario de arrastrar y soltar.
  2. 7

    Ver Firefox defecto.

    Como una alternativa, la configuración de la draggable=»false» en la entrada del evento de selección y colocación de nuevo a draggable=»true» en la entrada de desenfoque evento funciona.

    Ver jsfiddle para un ejemplo sin ningún tipo de marco.

    HTML:

    <div draggable="true" id="draggableDiv">
        <textarea onfocus="onFocus();" onblur="onBlur();">Inside draggable (FIXED)</textarea>
    </div>

    JS:

    onFocus= function(e) {
        document.getElementById("draggableDiv").setAttribute("draggable", "false");
    }
    onBlur= function(e) {
        document.getElementById("draggableDiv").setAttribute("draggable", "true");
    }
  3. 0

    He utilizado el onMouseEnter y onMouseLeave funciones en el área de texto para establecer el div que pueden arrastrarse sólo cuando el ratón está fuera del textarea.

    Lo hice porque necesitaba el enfoque para permanecer en los campos de edición mientras se arrastra y arrastra en sí no desencadenar un evento de selección.

  4. 0

    También he encontrado el uso de onmouseenter y onmouseleave para cambiar el atributo draggable funciona mejor, porque coloca el cursor en el cuadro de entrada donde realmente haga clic en. Cuando se utiliza onfocus/onblur, el cursor va siempre al principio o al final del texto, incluso si hace clic en el medio.

Dejar respuesta

Please enter your comment!
Please enter your name here