HTML5 Trascina e rilascia - Nessuna trasparenza?

Question

Quando trascino un elemento sulla mia pagina, l'elemento diventa "ghosted". Fondamentalmente ottiene un certo valore di trasparenza.

C'è un modo per renderlo opacity: 1;?

Answer 1

sembra che non può essere fatto. L'elemento trascinato viene messo in un contenitore che ha il proprio, inferiore a 1, opacità. Ciò significa che mentre puoi ridurre l'opacità dell'elemento trascinato, non puoi ottenerlo più in alto dell'opacità dell'elemento incapsulante.

È possibile sovrascrivere le impostazioni del browser predefinito per tale elemento, ma poiché nulla viene aggiunto a DOM durante il trascinamento, sarebbe molto difficile al meglio.

Answer 2

Se si utilizza JavaScript poi nella funzione che gestisce l'evento DragStart comprendono impostare l'opacità stile a 1 Esempio:

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

Answer 3

come già accennato, questo è gestito dal browser -> non è possibile modificare questo comportamento, ma se hai davvero bisogno di questo effetto prova a cercare il movimento del mouse quando il mouse è inattivo (breve: trascinamento), controlla quale elemento è selezionato e crea una copia al volo che segue il tuo cursore del mouse. sembra un lavoro ideale per jQuery;)

ma se non ne hai bisogno disperatamente non proverei a cambiare i valori predefiniti dei browser, in quanto le persone sono abituati e potrebbe essere confuso se qualcosa si comporta in un altro (sconosciuto) way

Answer 4

sebbene questa non sia la vera soluzione del problema principale, ho un'idea di cosa potrebbe funzionare, almeno l'ho provato in uno dei miei progetti GWT qualche tempo fa e ha funzionato, quindi credo potrebbe funzionare in nativo JS e benche non ho alcun esempio di codice:

1. Invece di utilizzare la funzione di trascinamento, creare un nuovo elemento che Equ questo è l'elemento che dovrebbe essere trascinato nella posizione originale dell'elemento da trascinare. L'elemento originale da trascinare dovrebbe essere reso invisibile ora. Implementa una logica che ripristina l'elemento originale e rimuove il clone non appena il mouse non viene più premuto.

2. Rendi l'elemento clone attaccato alla posizione del mouse. L'evento che rimuove il clone deve anche verificare se il mouse viene rilasciato mentre l'elemento da trascinare è posizionato su un'area in cui è possibile trascinare l'ement originale.

3. Se vero, rimuovere il clone e spostare l'elemento originale nel contenitore di destinazione.

C'è sicuramente un sacco di lavoro aggiustamento da fare in CSS e JS pure, ma potrebbe essere un trucco per sopraffare lo standard JS.

Answer 5

Penso che la trasparenza non provenga dai contenuti web ma dal browser e dal sistema operativo. Se si desidera modificare l'opacità, è necessario modificare o hackerare il browser e il sistema operativo

Answer 6

Se non si stanno trascinando e rilasciando elementi dall'esterno della pagina Web (dal sistema operativo), è possibile risolvere facilmente questo problema implementando il proprio drag and drop. Ci sono numerosi esempi di puro drag-and-drop in JavaScript che funzionerà perfettamente in un ambiente HTML5 e sarà completamente personalizzabile da te.

risposta: (utilizzare il vecchio modo)

Answer 7

Suggerimento, effettuare le seguenti operazioni, ora per questo mi sto usando jQuery, provare, prima di dire qualcosa non funzionerà, non siamo qui per dare risposte, ma qui per puntare nella giusta direzione.

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

allora avete bisogno di venire con via per dire che ha coltivato a gradini draging e caduto in posizione, e poi a removeClass ('overdrag');

Questo non è difficile da fare, quindi penso che dovresti essere in grado di farlo. Voglio ringraziare @DonaldHuckle in quanto questa è davvero la sua soluzione non mia.

Answer 8

Come altri hanno suggerito, avrete bisogno di un qualche tipo di meccanismo che:

1. nascondere l'elemento che viene trascinato.
2. Crea un clone dell'elemento che viene trascinato.
3. Mettere il clone al posto dell'elemento che viene trascinato.
4. Ascoltare l'evento drag per posizionare l'elemento clone.

In pratica, assomiglia a questo:

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'; 
}; 

Inizia con il fissaggio di un elemento:

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

e si ha un trascinamento di lavoro e rilasciare con il pieno controllo su l'aspetto di l'elemento trascinabile. Nell'esempio sopra, io clone l'elemento originale per usarlo come handle. È possibile estendere la funzione Drag per personalizzare l'handle (ad esempio, utilizzare l'immagine per rappresentare l'elemento trascinabile).

Prima di arrivare troppo eccitato, ci sono un paio di cose da considerare:

• drag WHATWG and Drop non funziona con il mobile, HTML5 Drag & Drop for Mobile
• non c'è modo di catturare il "rilascio maniglia" evento, Vedere il collegamento per la soluzione: How to get mouseup event after native drag event?.

Aggiornamento:

Ho scritto una libreria per il tocco consentito l'attuazione di resistenza WHATWG e il meccanismo di goccia, https://github.com/gajus/pan.

Answer 9

Si prega di vedere questo lavoro fiddle

ho una soluzione per rendere un'immagine opaca al posto di fantasma e funziona bene in chrome.But non il suo lavoro in FF.I bisogno di qualche corpo per aiutarmi a fare funziona in Firefox e altri browser. passaggi 1. Creeremo la nostra immagine fantasma e la imposterà come immagine di trascinamento.

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.Noi clonare l'immagine e aggiungerlo al 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.Then faremo il clone di muoversi con il cursore

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 Ultima faremo la visibilità clone andato

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