Ho visto qualche codice funzionante per il trascinamento della selezione HTML5 ma qualcuno ha un esempio di trascinamento e copia? Voglio trascinare un elemento su un elemento di rilascio ma solo copiare l'elemento in questa posizione.HTML5 trascina e copia?
risposta
mi atterrò al Nell'esempio mostrato qui: http://www.w3schools.com/html/html5_draganddrop.asp
Supponendo che abbiamo questo documento:
<!DOCTYPE HTML>
<html>
<head>
<script>
<!-- script comes in the text below -->
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
drag Normale & goccia
trascinamento normale and drop ha tali funzioni assegnato ai rispettivi elementi:
function allowDrop(ev) {
/* The default handling is to not allow dropping elements. */
/* Here we allow it by preventing the default behaviour. */
ev.preventDefault();
}
function drag(ev) {
/* Here is specified what should be dragged. */
/* This data will be dropped at the place where the mouse button is released */
/* Here, we want to drag the element itself, so we set it's ID. */
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
/* The default handling is not to process a drop action and hand it to the next
higher html element in your DOM. */
/* Here, we prevent the default behaviour in order to process the event within
this handler and to stop further propagation of the event. */
ev.preventDefault();
/* In the drag event, we set the *variable* (it is not a variable name but a
format, please check the reference!) "text/html", now we read it out */
var data=ev.dataTransfer.getData("text/html");
/* As we put the ID of the source element into this variable, we can now use
this ID to manipulate the dragged element as we wish. */
/* Let's just move it through the DOM and append it here */
ev.target.appendChild(document.getElementById(data));
}
Trascinare & Copia
Mentre si dovrà alterare la funzione goccia in modo che esso copia l'elemento DOM, invece di spostarlo.
/* other functions stay the same */
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");
/* If you use DOM manipulation functions, their default behaviour it not to
copy but to alter and move elements. By appending a ".cloneNode(true)",
you will not move the original element, but create a copy. */
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId"; /* We cannot use the same ID */
ev.target.appendChild(nodeCopy);
}
Prova questa pagina: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
E poi aggiungere un .cloneNode(true)
a getElementById(data)
.
Passare da una copia & Incolla
Si potrebbe anche fare le cose come in file manager: interruttori Ctrl-chiave di muoversi alla copia:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");
/* Within a Mouse event you can even check the status of some Keyboard-Buttons
such as CTRL, ALT, SHIFT. */
if (ev.ctrlKey)
{
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId"; /* We cannot use the same ID */
ev.target.appendChild(nodeCopy);
}
else
ev.target.appendChild(document.getElementById(data));
}
Grazie Nippey - è bello vederlo funziona davvero in HTML5! – robotwasp
ev.ctrlKey era quello che stavo cercando! – JohnnyLambada
+1 mi ha aiutato oggi :) –
Se si voleva un esempio utilizzando jQuery ho fornito this jsFiddle. In sostanza, è sufficiente eseguire il binding agli eventi drop
, dragover
e dropstart
per gli oggetti DOM. È quindi possibile utilizzare la build di JQuery nel metodo clone()
per duplicare l'elemento.
JQuery ritorna anche un proprio involucro eventi quindi è necessario ottenere il originalevent
dall'evento JQuery
$('#x').bind('dragstart', function(e) {
e.originalEvent.dataTransfer.effectAllowed = 'copy';
e.originalEvent.dataTransfer.setData('Text', '#x');
});
$('#drop-box').bind('drop', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone());
return false;
}).bind('dragover', false);
Hey, grazie BeRecursive, funzionerebbe perfettamente! Speravo di utilizzare le funzionalità di trascinamento e rilascio native HTML5. – robotwasp
Questi dovrebbero legarsi agli eventi Javascript HTML5, questo non sta usando l'interfaccia '' draggable'' di JQueryUI. – BeRecursive
- 1. trascina e rilascia cross frame usa html5
- 2. HTML5 Trascina e rilascia - Nessuna trasparenza?
- 3. Trascina e rilascia polyfill?
- 4. Nice Trascina su una tela HTML5
- 5. Perché HTML5 non funziona e trascina il lavoro in Firefox?
- 6. HTML5 Trascina e rilascia usando Selenium Webdriver per Ruby
- 7. HTML5: trascina/rilascia sull'asse X e senza dissolvenza?
- 8. Disattiva clic e trascina copia e incolla in IntelliJ Idea IDE
- 9. C# Trascina e trascina da una casella immagine a un'altra
- 10. html5: copia una tela per immagine e ritorno
- 11. Trascina e rilascia la funzionalità all'interno dell'area di disegno utilizzando HTML5
- 12. HTML5 Trascina e rilascia: carica file di testo in una casella di testo con JavaScript
- 13. html5 trascina e rilascia i file - carica quando viene inviato l'intero modulo
- 14. C# Listview Trascina e rilascia le righe
- 15. Google Gears trascina e rilascia upload
- 16. simulatore ios: simula lo scorrimento e trascina
- 17. Editor di trascina e rilascia in Eclipse
- 18. javascript trascina e rilascia generatore di pagine
- 19. Trascina e ridimensiona JFrame non decorato
- 20. Scorrere mentre si trascina e rilascia (WPF)
- 21. Trascina per eliminare l'elemento
- 22. Copia di costruttori e copia difensiva
- 23. proprietà Copia e Block_copy (myBlock)/[copia myBlock]
- 24. copia superficiale e copia completa in C
- 25. Effetto trascina Trello
- 26. Trascina immagine al tocco
- 27. VB.net - trascina e rilascia e ottieni il percorso del file?
- 28. ascolta tocca e trascina il valore e funziona di conseguenza
- 29. jquery ui trascina + ordinabile
- 30. Trascina il file dall'applicazione a Explorer. La mia applicazione può fare la copia?
l'azione di rilascio è interamente a voi. Se vuoi che faccia una "copia", fallo. – Oded