ondragstart ইভেন্ট
সংজ্ঞা ও ব্যবহার
ondragstart ইভেন্ট ব্যবহারকারী ইলেকট্রনিক টেক্সটকে ট্রেজ করা বা টেক্সটকে পড়ার সময় ঘটে
ট্রেজ ও ড্রপ HTML5-এর অত্যন্ত সাধারণ ফিচার। যখন আপনি একটি অবজেক্টকে "ট্রেজ" করে এবং একটি অন্য স্থানে ট্রেজ করে। আরও জানতে চান, আমাদের ওয়েবসাইটকে পড়ুন HTML5 ট্রেজডতার জন্য HTML টিউটোরিয়ালটি।
প্রকল্পণ:যদি ইলেকট্রনিক টেক্সটকে ট্রেজকৃত করতে হয়, তবে গ্লোবাল HTML টিউটোরিয়ালটি ব্যবহার করুন HTML5 draggable অ্যাট্রিবিউট.
সুঝাওয়া:ডিফল্টভাবে, লিঙ্ক এবং ছবিগুলি ট্রেজকৃত হয়, draggable অ্যাট্রিবিউট প্রয়োজন নেই。
ট্রেজ ও ড্রপ অপারেশনের বিভিন্ন পর্যায়ে, অনেক ইভেন্ট ব্যবহৃত হয় এবং ঘটতে পারে:
ট্রেজকৃত টার্গেট (সূত্র ইলেকট্রনিক টেক্সট) উপর ট্রিগার হওয়া ইভেন্ট:
- ondragstart - যখন ব্যবহারকারী ইলেকট্রনিক টেক্সটকে ট্রেজ করতে শুরু করে
- ondrag - যখন ইলেকট্রনিক টেক্সটকে ট্রেজ করা হয়
- ondragend - যখন ব্যবহারকারী ট্রেজ ইলেকট্রনিক টেক্সটকে সম্পূর্ণ করে
পত্তন টার্গেটের উপর ট্রিগার হওয়া ইভেন্ট:
- ondragenter - যখন ট্রেজকৃত ইলেকট্রনিক টেক্সটকে পত্তন টার্গেটে প্রবেশ করা হয়
- ondragover - যখন ট্রেজকৃত ইলেকট্রনিক টেক্সটকে পত্তন টার্গেটে থাকছে
- ondragleave - যখন ট্রেজকৃত ইলেকট্রনিক টেক্সটকে পত্তন টার্গেট থেকে সরানো হয়
- ondrop - যখন ট্রেজকৃত ইলেকট্রনিক টেক্সটকে পত্তন টার্গেটে স্থাপন করা হয়
ইনস্টান্স
যখন ব্যবহারকারী <p> ইলেকট্রনিক টেক্সটকে ট্রেজ করতে শুরু করে:
<p draggable="true" ondragstart="myFunction(event)">Drag me!</p>
পাতার নিচে আরও TIY ইনস্টান্সস আছে।
সংজ্ঞা
এইচটিএমএল-এর মধ্যে:
<element ondragstart="myScript">
জেভাস্ক্রিপ্টের মধ্যে:
object.ondragstart = function(){myScript};
জেভাস্ক্রিপ্টের মধ্যে, addEventListener() মথুরা ব্যবহার করুন:
object.addEventListener("dragstart", myScript);
প্রকল্পণ:ইন্টারনেট এক্সলোরার ৮ বা আরও পুরানো সংস্করণগুলি সমর্থন করে না addEventListener() method.
Technical details
| Bubble: | Supported |
|---|---|
| Cancelable: | Supported |
| Event type: | DragEvent |
| Supported HTML tags: | All HTML elements |
| DOM version: | Level 3 Events |
Browser support
The numbers in the table indicate the first browser version that fully supports the event.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
More examples
For all possible drag and drop events demonstration:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()方法设置被拖拽数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// 更改可拖动元素的不透明度
event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* ----------------- ড্রপ টার্গেটের উপর ট্রিগার হওয়া ইভেন্ট ----------------- */
// ড্রগকরা p এলিমেন্ট ড্রপটার্গের অভ্যন্তরে প্রবেশ করলে, DIV এর বর্তনীর শৈলী পরিবর্তন করুন
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// ডিফল্টভাবে, ডাটা/এলিমেন্টকে অন্য এলিমেন্টে পড়া যায় না। পড়া অনুমতি দিতে, আমরা এলিমেন্টের ডিফল্ট প্রক্রিয়াকরণ প্রতিরোধ করতে হবে
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// ড্রগকরা p এলিমেন্ট ড্রপটার্গের অভ্যন্তর থেকে বের হলে, DIV এর বর্তনীর শৈলী পুনরায় সংযোজন করুন
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - ড্রপ করার সময় ব্রাউজারের ডাটার ডিফল্ট প্রক্রিয়াকরণ প্রতিরোধ করুন (ডিফল্ট ড্রপ হলো লিঙ্ক হিসাবে খোলা)
আউটপুট টেক্সট এবং DIV এর বর্তনীর রঙ পুনরায় সংযোজন করুন
dataTransfer.getData() মথুর মাধ্যমে ড্রগ করা ডাটা পাওয়া
ড্রগ করা ডাটা হল ড্রগ করা এলিমেন্টের id ("drag1")
ড্রগ হওয়া এলিমেন্টকে ড্রপ হওয়া এলিমেন্টে যুক্ত করুন
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
