मैंने HTML5 ड्रैग और ड्रॉप के लिए कुछ कामकाजी कोड देखा है लेकिन क्या कोई ड्रैग और कॉपी का उदाहरण है? मैं तत्व को ड्रॉप तत्व पर खींचना चाहता हूं लेकिन केवल इस स्थान पर तत्व की प्रतिलिपि बनाना चाहता हूं।एचटीएमएल 5 खींचें और प्रतिलिपि बनाएँ?
उत्तर
मैं यहां दिखाए गए उदाहरण से चिपक जाएगा: http://www.w3schools.com/html/html5_draganddrop.asp
मान लिया जाये कि हम इस दस्तावेज़ है:
<!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>
सामान्य खींचें & ड्रॉप
सामान्य खींचें और ड्रॉप इस तरह के कार्य करता है संबंधित तत्वों को सौंपा गया:
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));
}
खींचें & कॉपी
जबकि आप ड्रॉप समारोह को बदलने के लिए इतना है कि यह प्रतियां डोम तत्व के बजाय इसे आगे बढ़ होगा।
/* 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);
}
इस पेज का प्रयास करें: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
और फिर एक .cloneNode(true)
getElementById(data)
को जोड़ देते हैं। नकल में जाने से Ctrl कुंजी स्विच:: कॉपी & के बीच
स्विच पेस्ट
तुम भी फ़ाइल प्रबंधक में तरह बातें कर सकता है
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));
}
धन्यवाद निप्पी - यह देखने के लिए बहुत अच्छा है वास्तव में एचटीएमएल 5 में काम करता है! – robotwasp
ev.ctrlKey मैं जो खोज रहा था! – JohnnyLambada
+1 ने आज मेरी मदद की :) –
यदि आप JQuery का उपयोग कर रहा है एक उदाहरण चाहता था this jsFiddle प्रदान किया गया। अनिवार्य रूप से आपको केवल drop
, dragover
और dropstart
डीओएम ऑब्जेक्ट्स के लिए ईवेंट से जुड़ना होगा। इसके बाद आप तत्व को डुप्लिकेट करने के लिए clone()
विधि में JQuery के निर्माण का उपयोग कर सकते हैं।
JQuery भी देता है अपने आप घटनाओं आवरण ताकि आप 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);
अरे धन्यवाद BeRecursive - यह पूरी तरह से काम करेगा! मैं एचटीएमएल 5 देशी ड्रैग और ड्रॉप सुविधाओं का उपयोग करने की उम्मीद कर रहा था। – robotwasp
इन्हें एचटीएमएल 5 जावास्क्रिप्ट घटनाओं से जोड़ना चाहिए, यह JQueryUI के '' draggable'' इंटरफ़ेस का उपयोग नहीं कर रहा है। – BeRecursive
- 1. एचटीएमएल 5 खींचें और क्रोम
- 2. एचटीएमएल 5 खींचें और ड्रॉप करें: जावास्क्रिप्ट
- 3. एचटीएमएल 5 खींचें और छोड़ें घटनाओं और setDragImage ब्राउज़र समर्थन
- 4. jQuery और एचटीएमएल 5 खींचें और ड्रॉप (शेड्यूलर) में ड्रॉप
- 5. एचटीएमएल 5: एक्स-अक्ष पर खींचें/छोड़ें और बिना फीका?
- 6. एचटीएमएल 5 फ़ायरफ़ॉक्स में खींचें और ड्रॉप माउस स्थिति
- 7. एचटीएमएल 5 खींचें और छोड़ें - कोई पारदर्शिता नहीं है?
- 8. एचटीएमएल 5 के लाभ jQuery यूआई खींचें और ड्रॉप करें
- 9. एचटीएमएल 5
- 10. रचनाकारों की प्रतिलिपि बनाएँ - सी ++
- 11. एचटीएमएल 5
- 12. एचटीएमएल 5 और जेएस
- 13. एचटीएमएल 5 और जावास्क्रिप्ट
- 14. एचटीएमएल 5 और PHP
- 15. एचटीएमएल 5 और जावास्क्रिप्ट
- 16. एचटीएमएल 5 और सर्वलेट
- 17. एचटीएमएल 5 और जावास्क्रिप्ट
- 18. एचटीएमएल 5 और जावास्क्रिप्ट
- 19. एचटीएमएल 5 और जावास्क्रिप्ट
- 20. एचटीएमएल 5 और accesskey
- 21. एचटीएमएल 5 और फ्रेमबॉर्डर
- 22. एचटीएमएल 5 और कैनवास
- 23. एचटीएमएल 5
- 24. कोशिकाओं की एक श्रृंखला की प्रतिलिपि बनाएँ और डेटा
- 25. एचटीएमएल 5 खींचें और ड्रॉप: मैं क्लोन और मूल तत्वों को कैसे लक्षित करूं?
- 26. एचटीएमएल 5 एचटीएमएल टैग और DOCTYPE
- 27. copy_backward या reverse_iterators के साथ प्रतिलिपि बनाएँ?
- 28. एंड्रॉइड: प्रतिलिपि बनाएँ/डुप्लिकेट साझा करें
- 29. सभी विधि नामों की प्रतिलिपि बनाएँ - Intellij
- 30. जावा में किसी ऑब्जेक्ट की प्रतिलिपि बनाएँ
ड्रॉप कार्रवाई आप पर निर्भर करता है से
originalevent
प्राप्त करना होगा। यदि आप इसे "प्रतिलिपि" करना चाहते हैं, तो ऐसा करें। – Oded