Ich habe einige funktionierende Code für HTML5 Drag & Drop gesehen, aber hat jemand ein Beispiel für ein ziehen und kopieren? Ich möchte ein Element auf ein Drop-Element ziehen, aber nur das Element an diesen Ort kopieren.HTML5 ziehen und kopieren?
Antwort
Ich werde zum Beispiel bleibe hier gezeigt: http://www.w3schools.com/html/html5_draganddrop.asp
Angenommen, wir haben dieses Dokument:
<!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>
Normalen Drag & Tropfen
Normal Drag & Drop haben solche Funktionen zugeordnet zu den jeweiligen Elementen:
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));
}
Drag & Copy
Während Sie müssen die Drop-Funktion zu verändern, so dass es kopiert das Element DOM, anstatt es zu bewegen.
/* 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);
}
Versuchen Sie diese Seite: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
Und dann ein .cloneNode(true)
zu getElementById(data)
anhängen.
Umschalten zwischen Kopieren & Einfügen
Sie auch Dinge wie in Datei-Manager tun können: Strg-Taste Schalter bewegt, um das Kopieren:
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));
}
Danke Nippey - es ist toll zu sehen, das funktioniert tatsächlich in HTML5! – robotwasp
ev.ctrlKey war was ich gesucht habe! – JohnnyLambada
+1 half mir heute :) –
Wenn Sie ein Beispiel mit JQuery wollte ich bereitgestellt this jsFiddle. Im Wesentlichen müssen Sie nur an die Ereignisse drop
, dragover
und dropstart
für die DOM-Objekte binden. Sie können dann das Build von JQuery in der Methode clone()
verwenden, um das Element zu duplizieren.
JQuery auch gibt es eigene Veranstaltungen Wrapper so müssen Sie die originalevent
vom JQuery Ereignis
$('#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 danke BeRecursive - das würde total funktionieren! Ich hatte gehofft, die HTML5 nativen Drag & Drop-Funktionen zu verwenden. – robotwasp
Diese sollten an die HTML5-Javascript-Ereignisse binden, dies verwendet nicht die '' ziehbare'' Schnittstelle von JQueryUI. – BeRecursive
- 1. Ziehen und Ändern der Größe eines Bildes auf html5-Canvas
- 2. Wie ein html5 ziehen zu testen und fallen in QUnit
- 3. Batch-Datei Kopieren mit% 1 zum Ziehen und Ablegen
- 4. Kopieren div nach dem Ziehen jquery
- 5. Wie ändert man das Cursorsymbol beim Ziehen in HTML5?
- 6. javascript + html5 Leinwand: Zeichnen statt Ziehen/Scrollen auf mobilen Geräten?
- 7. Ajax - drücken und ziehen?
- 8. Spielmacher Zoomen und Ziehen
- 9. AWS S3 herunterladen und kopieren
- 10. Bild ziehen und ablegen (WPF-Fenster)
- 11. HTML5 und MySQL Datumsformat
- 12. HTML5-Validierung und Feldvergleich
- 13. HTML5-Frameworks und -Tools?
- 14. HTML5 und Cookies
- 15. ASP.NET MVC und HTML5
- 16. HTML5 srcset und Größen
- 17. HTML5 Tabellenabstand und Ausrichtung
- 18. Html5 Videoaufnahme und -upload?
- 19. HTML5 Bluetooth und Audio
- 20. HTML5-Manifest und Chrom
- 21. httpd.conf und HTML5 pushstate()
- 22. HTML5 Video und Verschlechterung?
- 23. HTML5 und frameborder
- 24. HTML5 Canvas und manipulieren
- 25. angularjs ziehen und sortieren divs
- 26. jQGrid Ziehen und Ablegen Zeilenüberprüfung
- 27. Ziehen und Ablegen von Objekten
- 28. Android - Sleep() und dann ziehen
- 29. Teile und ziehen mehrere Rechteck
- 30. Ziehen und Ablegen funktioniert nicht
Die Drop-Aktion ganz bei Ihnen ist bekommen. Wenn Sie möchten, dass es eine "Kopie" macht, dann tun Sie das. – Oded