کشیدن و رها کردن

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از Drag و drop در اچ تی ام ال)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
۱موقعیت جغرافیایی
۲کشیدن/رهاکردن
۳ذخیره‌سازی وب
۴Workerهای وب
۵SSE
مثال‌ها
مرجع HTML


تصویر WikiCod را داخل مستطیل بکشید.[۱]

کشیدن و رها کردن (به انگلیسی: Drag and Drop)

Drag and Drop یکی از ویژگی‌های بسیار رایج است. یعنی زمانی که شما یک شیء را «برمی‌دارید» و آن را به مکان متفاوتی می‌کشید.

در HTML5، کشیدن و رها کردن بخشی از استاندارد هستند: هر عنصری قابل کشیدن(به انگلیسی: Draggable) است.

پشتیبانی مرورگر

اعداد در جدول زیر اولین نسخه هر مرورگر را نشان می‌دهد که از drag and drop پشتیبانی کامل می‌کنند.

API Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
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>:


مشاهدهٔ نتیجه



منابع آموزشی