के साथ ड्रैग ड्रॉप मेरे पास एक div है जिसमें 16x16px है। मैं ड्रैग इवेंट शुरू करना चाहता हूं जब उपयोगकर्ता इस आइकन पर क्लिक करता है और ड्रैग करता है लेकिन उसे पूरे div को खींचना चाहिए। मैं यहां इस ट्यूटोरियल का पालन करने की कोशिश कर रहा हूं: http://www.html5rocks.com/en/tutorials/dnd/basics/हैंडल
मैं यह नहीं समझ सकता कि इसे हैंडल के साथ कैसे किया जाए। कृपया सलाह दें।
यहाँ एक काम कर उदाहरण है: https://jsfiddle.net/pwt1cbjc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag Handle</title>
<style>
#draggable {
width: 100px;
height: 100px;
border: 1px solid black;
}
#handle {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-top: 20px solid black;
cursor: move;
}
</style>
</head>
<body>
<h1>Drag Handle</h1>
<div id="draggable" draggable="true">
<div id="handle">
</div>
</div>
<script>
var draggable = document.getElementById('draggable');
var handle = document.getElementById('handle');
var target = false;
draggable.onmousedown = function(e) {
target = e.target;
};
draggable.ondragstart = function(e) {
if (handle.contains(target)) {
e.dataTransfer.setData('text/plain', 'handle');
} else {
e.preventDefault();
}
};
</script>
</body>
</html>
वाह धन्यवाद आप इस शांत, div हालांकि ड्रॉप पर नहीं ले जाया जाता है है, यह है कि जोड़ने के लिए संभव है? स्लाइड एनीमेशन को जोड़ना भी संभव है क्योंकि उपयोगकर्ता घूमता है? – Noitidart
उम्मीद नहीं थी कि आपको अभी भी इस पुराने प्रश्न के उत्तर की आवश्यकता है, हाहा! दुर्घटना से इसके पार आया और वैसे भी इसका जवाब देने का फैसला किया। ड्रॉप करने के बारे में, कुछ नमूना कोड के लिए यहां जवाब देखें: http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the- स्क्रीन – SaphuA
मैं इसके बारे में एक और तरीका गया, यह बहुत अधिक गहन था (mousedown पर मैंने mousemove श्रोता जोड़ा, और mousemove पर मैं elment 'left',' top' सेट किया होगा और यह कर्सर का अच्छा एनिमेटेड तरीके से पालन करेगा), आपका तरीका बहुत अच्छा है और मुझे और अधिक प्रदर्शन करने वाला लगता है, और मैं इसे अनुकूलित करना पसंद करूंगा। – Noitidart