Arrastrar y soltar con precisión dentro de un contenteditable

La configuración

Por lo tanto, tengo un div contenteditable'm Estoy haciendo un editor WYSIWYG: negrita, cursiva, formato, lo que sea, y más recientemente: insertar imágenes de lujo (en un cuadro de lujo, con un título).

<a class="fancy" href="i.jpg" target="_blank">
    <img alt="" src="i.jpg" />
    Optional Caption goes Here!
</a>

El usuario agrega estas imágenes elegantes con un diálogo con el que las presento: rellenan los detalles, cargan la imagen y luego, al igual que las otras funciones del editor, utilizo document.execCommand('insertHTML',false,fancy_image_html); para introducirlas en la selección del usuario.

Funcionalidad deseada

Así que, ahora que mi usuario puede plop en una imagen elegante need necesitan ser capaces de moverlo alrededor. El usuario debe poder hacer clic y arrastrar la imagen (cuadro de fantasía y todo) para colocarla en cualquier lugar que desee dentro del contenteditable. Necesitan ser capaces de moverlo entre párrafos, o incluso dentro de párrafos between entre dos palabras si quieren.

Lo que me da esperanza{[17]]}

Tenga en cuenta in en un contenido editable, llano viejo <img> las etiquetas ya están bendecidas por el agente de usuario con esto encantadora capacidad de arrastrar y soltar. De forma predeterminada, puede arrastrar y soltar <img> etiquetas alrededor de donde quiera; la operación predeterminada de arrastrar y soltar se comporta como uno soñaría.

Por lo tanto, teniendo en cuenta cómo este comportamiento predeterminado ya funciona de manera tan aplastante en nuestros amigos <img> -- y solo quiero extender este comportamiento un poco para incluir un poco más HTML this esto parece algo que debería ser fácilmente posible.

Mis Esfuerzos Hasta Ahora

Primero, establecí mi fancy <a> etiqueta con el atributo arrastrable, y deshabilitado contenteditable (no estoy seguro de si es necesario, pero parece que también podría estar desactivado):

<a class="fancy" [...] draggable="true" contenteditable="false">

Entonces, debido a que el usuario todavía podía arrastrar la imagen fuera del cuadro de fantasía <a>, tuve que hacer un poco de CSS. Estoy trabajando en Chrome, así que solo te estoy mostrando los prefijos - webkit -, aunque he utilizado los demás también.

.fancy {
    -webkit-user-select:none;
    -webkit-user-drag:element; }
    .fancy>img {
        -webkit-user-drag:none; }

Ahora el usuario puede arrastrar todo el cuadro de fantasía, y la pequeña imagen de representación de clic y arrastre parcialmente desvanecida refleja esto can puedo ver que estoy recogiendo toda la caja ahora:)

He probado varias combinaciones de diferentes propiedades CSS, la combinación anterior parece tener sentido para mí, y parece funcionar mejor.

Esperaba que este CSS por sí solo sería suficiente para que el navegador utilice todo el elemento como elemento arrastrable, otorgando automáticamente al usuario la funcionalidad con la que he estado soñando... Sin embargo, parece ser más complicado que que.

API de Arrastrar y soltar JavaScript de HTML5

Este Arrastrar y soltar cosas parece más complicado de lo que necesita ser.

Entonces, empecé a profundizar en los documentos de la api DnD, y ahora estoy atascado. Por lo tanto, esto es lo que he amañado (sí, jQuery):

$('.fancy')
    .bind('dragstart',function(event){
        //console.log('dragstart');
        var dt=event.originalEvent.dataTransfer;
        dt.effectAllowed = 'all';
        dt.setData('text/html',event.target.outerHTML);
    });

$('.myContentEditable')
    .bind('dragenter',function(event){
        //console.log('dragenter');
        event.preventDefault();
    })
    .bind('dragleave',function(event){
        //console.log('dragleave');
    })
    .bind('dragover',function(event){
        //console.log('dragover');
        event.preventDefault();
    })
    .bind('drop',function(event){
        //console.log('drop');      
        var dt = event.originalEvent.dataTransfer;
        var content = dt.getData('text/html');
        document.execCommand('insertHTML',false,content);
        event.preventDefault();
    })
    .bind('dragend',function(event){ 
        //console.log('dragend');
    });

Así que aquí es donde estoy atascado: Esto funciona casi por completo. Casi completamente. tengo todo funcionando, hasta el final. En el evento drop, ahora tengo acceso a la el contenido HTML de fancy box que estoy tratando de insertar en la ubicación de entrega. Todo lo que necesito hacer ahora, es insertarlo en la ubicación correcta!

El problema es No puedo encontrar la ubicación correcta de la gota, o cualquier forma de insertar en ella. He estado esperando encontrar algún tipo de 'dropLocation' objeto para volcar mi caja de lujo en, algo como dropEvent.dropLocation.content=myFancyBoxHTML;, o tal vez, al menos, algún tipo de valores de ubicación de caída con los que encontrar mi propia manera de poner el contenido ¿ahí? ¿Se me da algo?

¿Lo estoy haciendo completamente mal? ¿Me estoy perdiendo algo completamente?

Traté de usar document.execCommand('insertHTML',false,content); como esperaba que debería ser capaz de, pero desafortunadamente me falla aquí, ya que el cuadro de selección no se encuentra en el lugar preciso de entrega como esperaba.

Descubrí que si comento todos los event.preventDefault();'s, el cuadro de selección se hace visible, y como uno esperaría, cuando el usuario se prepara para drop, desplazando su arrastre sobre el contenteditable, el pequeño recuadro de selección se puede ver corriendo entre los caracteres que siguen el cursor del usuario y la operación de drop indicating indicando al usuario que el recuadro de selección representa la ubicación precisa de drop. Necesito la ubicación de este cuadro de selección.

Con algunos experimentos, probé execCommand-Inserthtml'ing durante el evento drop, y el evento dragend neither neither insert the HTML where the dropping-selection-caret era, en su lugar utiliza cualquier ubicación fue seleccionado antes de la operación de arrastre.

Debido a que el cuadro de selección es visible durante dragover, he tramado un plan.

Durante un tiempo, estaba intentando, en el evento dragover, insertar un marcador temporal, como <span class="selection-marker">|</span>, justo después de $('.selection-marker').remove();, en un intento por que el navegador constantemente (durante dragover) borre todos los marcadores de selección y luego agregue uno en el punto de inserción essentially esencialmente dejando un marcador donde sea que punto de inserción es, en cualquier momento. El plan, por supuesto, era reemplazar este marcador temporal con el contenido arrastrado que tengo.

Nada de esto funcionó, por supuesto: no pude conseguir que el marcador de selección se insertara en el caret de selección aparentemente visible como estaba previsto again de nuevo, el execCommand-insertedHTML se colocó donde estaba el caret de selección, antes de la operación de arrastre.

Cómo obtengo, o insertar en, la ubicación precisa de una operación de arrastrar y soltar? Siento que esto es, obviamente, una operación común entre arrastrar y soltar surely seguramente debo haber pasado por alto un detalle importante y flagrante de algún tipo? ¿Tuve que profundizar en JavaScript, o tal vez haya una manera de hacer esto solo con atributos como arrastrable, droppable, contenteditable y algunos CSS3 de fantasía?

Todavía estoy a la caza still todavía jugueteando around voy a publicar de nuevo tan pronto como yo averigüe lo que he estado fallando en:)

La búsqueda continúa (edita después del post original)

Farrukh publicó una buena sugerencia use uso:

console.log( window.getSelection().getRangeAt(0) );

Para ver dónde está realmente el cuadro de selección. Metí esto en el evento dragover , que es cuando imagino que el cuadro de selección está saltando visiblemente entre mi contenido editable en el contenteditable.

Por desgracia, el objeto de rango que se devuelve, informa índices de desplazamiento que pertenecen al carete de selección antes de la operación de arrastrar y soltar.

Fue un esfuerzo valiente. Gracias Farrukh.

Entonces, ¿qué está pasando aquí? Estoy teniendo la sensación de que el pequeño cuadro de selección que veo saltando alrededor, no es el cuadro de selección en absoluto! Creo que es un impostor!

Después De Una Inspección Adicional!

Resulta que es un impostor! El real cuidado de selección permanece en su lugar durante toda la operación de arrastre! Puedes ¡mira al pequeño cabrón!

Estaba leyendo MDN Drag and Drop Docs , y encontré esto:

Naturalmente, es posible que también necesite mover el marcador de inserción alrededor de un evento de arrastre. Puede usar las propiedades clientX y clientY del evento como con otros eventos del ratón para determinar la ubicación del puntero del ratón.

Yikes, ¿significa esto que se supone que debo averiguarlo por mí mismo, basado en clientX y clientY?? Usando coordenadas del ratón para determinar la ubicación de la selección caret yo mismo? De miedo!!

Miraré en hacerlo mañana unless a menos que yo mismo, o alguien más aquí leyendo esto, pueda encontrar una solución sana:)