کشیدن و رها کردن
| Main Page Tutorial | |
|---|---|
 | |
| موارد آموزشی | |
| فرم‌های HTML | |
| گرافیک در HTML | |
| رسانه در HTML | |
| APIها در HTML | |
| ۱ | موقعیت جغرافیایی |
| ۲ | کشیدن/رهاکردن |
| ۳ | ذخیره‌سازی وب |
| ۴ | Workerهای وب |
| ۵ | SSE |
| مثال‌ها | |
| مرجع HTML | |
تصویر WikiCod را داخل مستطیل بکشید.[۱]
محتویات
- ۱ کشیدن و رها کردن (به انگلیسی: Drag and Drop)
- ۲ پشتیبانی مرورگر
- ۳ مثال های Drag and Drop در HTML
- ۴ Draggable (به فارسی: قابل کشیدن) کردن یک عنصر
- ۵ چه چیزی را Drag کنیم - ondragstart and setData()
- ۶ کجا انداخته (به انگلیسی: Drop) شود - ondragover
- ۷ انجام ondrop - Drop
- ۸ مثال‌های بیشتر
- ۹ منابع آموزشی
کشیدن و رها کردن (به انگلیسی: Drag and Drop)
Drag and Drop یکی از ویژگی‌های بسیار رایج است. یعنی زمانی که شما یک شیء را «برمی‌دارید» و آن را به مکان متفاوتی می‌کشید.
در HTML5، کشیدن و رها کردن بخشی از استاندارد هستند: هر عنصری قابل کشیدن(به انگلیسی: Draggable) است.
پشتیبانی مرورگر
اعداد در جدول زیر اولین نسخه هر مرورگر را نشان می‌دهد که از drag and drop پشتیبانی کامل می‌کنند.
| API |  |
 |
 |
 |
|
| Drag and Drop | ۴٫۰ | ۹٫۰ | ۳٫۵ | ۶٫۰ | ۱۲٫۰ |
مثال های Drag and Drop در HTML
مثال زیر، نمونهٔ ساده ای از drag and drop است:
مثال
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script>
5 function allowDrop(ev) {
6 ev.preventDefault();
7 }
8
9 function drag(ev) {
10 ev.dataTransfer.setData("text", ev.target.id);
11 }
12
13 function drop(ev) {
14 ev.preventDefault();
15 var data = ev.dataTransfer.getData("text");
16 ev.target.appendChild(document.getElementById(data));
17 }
18 </script>
19 </head>
20 <body>
21
22 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
23
24 <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
25
26 </body>
27 </html>
ممکن است پیچیده به نظر برسد اما بیایید همهٔ قسمت‌های مختلف رویداد drag and drop را بررسی کنیم.
Draggable (به فارسی: قابل کشیدن) کردن یک عنصر
اول از همه: برای draggable کردن یک عنصر، ویژگی draggable آن را برابر با true قرار می‌دهیم:
<img draggable="true">
چه چیزی را Drag کنیم - ondragstart and setData()
سپس مشخص می‌کنیم با کشیدن (drag کردن) یک عنصر باید چه اتفاقی بیفتد.
در مثال بالا، ویژگی ondragstart تابعی را فراخوانی می‌کند، drag(event)، که تعیین می‌کند چه داده‌هایی باید drag شوند.
متد dataTransfer.setData() نوع داده و مقدار دادهٔ Drag شده را مشخص می‌کند.
1 function drag(ev) {
2 ev.dataTransfer.setData("text", ev.target.id);
3 }
در این حالت، نوع داده "متن" و مقدار آن شناسه عنصر draggable است ("drag1").
کجا انداخته (به انگلیسی: Drop) شود - ondragover
رویداد ondragover محل drop شدن داده drag شده را تعیین می‌کند.
بطور پیش‌فرض، داده / عنصر را نمی‌توان در عنصرهای دیگر drop کرد (انداخت). برای ممکن کردن drop ما باید از مدیریت پیش‌فرض عنصر جلوگیری کنیم.
این کار با فراخوانی متد event.preventDefault() برای رویداد ondragover انجام می‌شود:
event.preventDefault()
انجام ondrop - Drop
هنگامیکه دادهٔ drag شده، drop می‌شود، رویداد drop رخ می‌دهد.
در مثال بالا، ویژگی ondrop تابعی را فراخوانی می‌کند drop(event):
1 function drop(ev) {
2 ev.preventDefault();
3 var data = ev.dataTransfer.getData("text");
4 ev.target.appendChild(document.getElementById(data));
5 }
توضیح کد:
- فراخوانی preventDefault() برای جلوگیری از رسیدگی به دادهٔ پیش‌فرض مرورگر (پیش‌فرض باز کردن بصورت لینک در هنگام drop است)
- به‌دست‌آوردن داده‌های drag شده با متد dataTransfer.getData(). این متد هر داده‌ای که در متد setData() با نوع مشابه تنظیم شده باشد را برمی‌گرداند
- داده‌های drag شده شناسهٔ عنصر drag شده هستند ("drag1")
- عنصر drag شده را به عنصر drop شده ضمیمه می‌کند
مثال‌های بیشتر
کشیدن تصویر به جلو و عقب
نحوهٔ کشیدن (و انداختن) تصویر به جلو و عقب بین دو عنصر <div>:
منابع آموزشی