HTML5 Arrastrar y soltar - Sin transparencia?

Como otros han sugerido, necesitará algún tipo de mecanismo que:

1. Ocultar el elemento que se está arrastrando.
2. Haga un clon del elemento que está siendo arrastrado.
3. Coloque el clon en lugar del elemento que se está arrastrando.
4. Escuche el evento drag para posicionar el elemento clone.

En la práctica, se ve así:

function Drag (subject) {
    var dative = this,
        handle,
        dragClickOffsetX,
        dragClickOffsetY,
        lastDragX,
        lastDragY;

    subject.draggable = true;

    dative.styleHandle(subject);

    subject.addEventListener('dragstart', function (e) {    
        handle = dative.makeHandle(subject);

        dragClickOffsetX = e.layerX;
        dragClickOffsetY = e.layerY;

        this.style.opacity = 0;
    });

    subject.addEventListener('drag', function (e) {
        var useX = e.x,
            useY = e.y;

        // Odd glitch
        if (useX === 0 && useY === 0) {
            useX = lastDragX;
            useY = lastDragY;
        }

        if (useX === lastDragX && useY === lastDragY) {
            return;
        }

        dative.translate(useX - dragClickOffsetX, useY - dragClickOffsetY, handle, subject);

        lastDragX = useX;
        lastDragY = useY;
    });

    subject.addEventListener('dragend', function (e) {
        this.style.opacity = 1;

        handle.parentNode.removeChild(handle);
    });
};

/**
 * Prevent the text contents of the handle element from being selected.
 */
Drag.prototype.styleHandle = function (node) {
    node.style['userSelect'] = 'none';
};

/**
 * @param {HTMLElement} subject
 * @return {HTMLElement}
 */
Drag.prototype.makeHandle = function (subject) {
    return this.makeClone(subject);
};

/**
 * Clone node.
 * 
 * @param {HTMLElement} node
 * @return {HTMLElement}
 */
Drag.prototype.makeClone = function (node) {
    var clone;

    clone = node.cloneNode(true);

    this.styleClone(clone, node.offsetWidth, node.offsetHeight);

    node.parentNode.insertBefore(clone, node);

    return clone;
};

/**
 * Make clone width and height static.
 * Take clone out of the element flow.
 *
 * @param {HTMLElement} node
 * @param {Number} width
 * @param {Nubmer} height
 */
Drag.prototype.styleClone = function (node, width, height) {
    node.style.position = 'fixed';
    node.style.zIndex = 9999;
    node.style.width = width + 'px';
    node.style.height = height + 'px';
    node.style.left = '-9999px';

    node.style.margin = 0;
    node.style.padding = 0;
};

/**
 * Used to position the handle element.
 * 
 * @param {Number} x
 * @param {Number} y
 * @param {HTMLElement} handle
 * @parma {HTMLElement} subject
 */
Drag.prototype.translate = function (x, y, handle, subject) {
    handle.style.left = x + 'px';
    handle.style.top = y + 'px';
};

Comience adjuntando un elemento:

new Drag(document.querySelector('.element'));

Y tienes un trabajo de arrastrar y soltar con control total sobre el aspecto del elemento arrastrable. En el ejemplo anterior, clono el elemento original para usarlo como controlador. Puede extender la función Drag para personalizar el identificador (por ejemplo, usar imagen para representar el elemento arrastrable).

Antes de que te emociones demasiado, hay un par de cosas a considerar:

• WHATWG Arrastrar y Soltar no funciona con móvil, HTML5 Arrastrar y Soltar para móvil
• No hay manera de capturar el " handle release" event, Ver el enlace para la solución: ¿Cómo obtener el evento mouseup después del evento de arrastre nativo?.

Actualización:

He escrito una biblioteca para la implementación táctil del mecanismo de arrastrar y soltar WHATWG, https://github.com/gajus/pan .

Si no está arrastrando y soltando elementos desde fuera de la página web (desde el sistema operativo), entonces podría resolver este problema fácilmente implementando su propio arrastrar y soltar. Hay numerosos ejemplos de arrastrar y soltar javascript puro que funcionará perfectamente en un entorno HTML5 y sería completamente personalizable por usted.

Respuesta: (usa la manera antigua)

Por favor, vea esto trabajando violín

Tengo una solución para hacer una imagen opaca en lugar de ghost y funciona bien en chrome.Pero no está funcionando en FF.Necesito algo de cuerpo que me ayude a hacer que funcione en Firefox y otros navegadores. Steps 1.Haremos nuestra propia imagen fantasma y la configuraremos como la imagen de arrastre.

document.addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "img/hackergotchi-simpler.png";
e.dataTransfer.setDragImage(img, 5000, 5000);//5000 will be out of the window
}, false);

2.Vamos a clonar la imagen y añadirla a DOM ondrag

var crt,dragX,dragY;
function drag(ev) {
    crt = ev.target.cloneNode(true);
    crt.style.position = "absolute"; 
    document.body.appendChild(crt);
    ev.dataTransfer.setData("text", ev.target.id);
}

3.Luego haremos que el clon se mueva con cursor

    document.addEventListener("dragover", function(ev){
ev = ev || window.event;
dragX = ev.pageX; dragY = ev.pageY;
crt.style.left=dragX+"px";crt.style.top=  dragY+"px";
console.log("X: "+dragX+" Y: "+dragY);
}, false);

4.At Por último haremos que la visibilidad del clon desaparezca

   document.addEventListener("dragend", function( event ) {crt.style.display='none';});

Como ya se mencionó, esto es manejado por el navegador -> no puede cambiar este comportamiento, pero si realmente necesita este efecto intente buscar el movimiento del ratón cuando el ratón está abajo (corto: arrastrando), verifique qué elemento está seleccionado y cree una copia sobre la marcha que siga el cursor del ratón. parece un trabajo ideal para jQuery;)

Pero si no lo necesita desesperadamente, no intentaría cambiar los valores predeterminados de los navegadores, ya que la gente está acostumbrada y puede confundirse si algo se comporta en otra forma (desconocida)

Aunque probablemente esta no sea la solución real del problema principal, tengo una idea de lo que podría funcionar, al menos lo probé en uno de mis proyectos GWT hace algún tiempo y funcionó, así que supongo que podría funcionar en JS nativo también aunque no tengo un ejemplo de código:

1. En lugar de usar la función de arrastre, cree un nuevo elemento que sea igual al elemento que debe arrastrarse en la posición original del elemento a arrastrar. El elemento original a ser arrastrado debe hacerse invisible ahora. Implementar una lógica que restaura el elemento orignal y elimina el clon tan pronto como el ratón no se pulsa más.

2. Haga que el elemento clone se adhiera a la posición del ratón. El evento que elimina el clon también tiene que comprobar si el ratón se libera mientras que el elemento a arrastrar se coloca sobre un área donde el ement original podría ser arrastrado a.

3. Si es true, elimine el clon y mueva el elemento original al destino contenedor.

Definitivamente hay mucho trabajo de ajuste que hacer en CSS y JS también, pero podría ser un truco para abrumar el estándar JS.

Creo que la transparencia no proviene del contenido de la web, sino del navegador y el sistema operativo. Si desea cambiar la opacidad, debe ajustar o hackear el navegador y el sistema operativo

Si está utilizando JavaScript, en la función que maneja el evento dragStart include, establezca la opacidad del estilo en 1 ejemplo:

function dragStartHandler(e) {
   this.style.opacity = '1.0';
}

Sugerencia, haga lo siguiente, ahora para esto estoy usando jQuery, pruébelo, antes de decir algo no funcionará, no estamos aquí para dar respuestas, sino aquí para indicarle la dirección correcta.

function dragStartHandler(e) { 
   $("span.{CLASS}")addClass('overdrag'); 
} 

Entonces tienes que venir con lejos para decir que se ha detenido arrastrando y caído en posición, y luego a removeClass('sobregiro');

Esto no es difícil de hacer, así que creo que deberías ser capaz de hacerlo. Quiero agradecer a @DonaldHuckle ya que esta es realmente su solución, no la mía.