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

کشیدن و رها کردن  در  html چیست؟

آموزش APIs درس دوم

کشیدن و انداختن

کشیدن و رها کردن یک ویژگی بسیار رایج است. این زمانی اتفاق می افتد  که شما “شیء” را جابجا کنید و آن را به مکان دیگری بکشید.

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

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

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

اعداد  مشخص شده در جدول  نسخه  اول مرورگر است که به طور کامل  از کشیدن و رها کردن پشتیبانی می کند.

APIکروم اینترنت اکسپلوررفایرفاکس سافاریآپرا
Drag and Drop۴.۰۹.۰۳.۵۶.۰۱۲.۰

پشتیبانی مرورگر html5 را از اینجا ببینید

مثال کشیدن و رها کردن

مثال زیر یک مثال ساده از کشیدن و رها کردن است:

 <!DOCTYPE HTML>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20allowDrop(ev)%20%7B%0A%20%20%20%20ev.preventDefault()%3B%0A%7D%0A%0Afunction%20drag(ev)%20%7B%0A%20%20%20%20ev.dataTransfer.setData(%22text%22%2C%20ev.target.id)%3B%0A%7D%0A%0Afunction%20drop(ev)%20%7B%0A%20%20%20%20ev.preventDefault()%3B%0A%20%20%20%20var%20data%20%3D%20ev.dataTransfer.getData(%22text%22)%3B%0A%20%20%20%20ev.target.appendChild(document.getElementById(data))%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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> 

 

این ممکن است به نظر پیچیده باشد ، اما اجازه می دهد تا از این  طریق  به تمام قسمت های مختلف یک رویداد کشیدن و رها کردن بروید.


عنصر Draggable را ایجاد کنید


اول از همه: برای ایجاد یک element draggable،(یعنی عنصری که قابلیت کشیدن و انداختن را داشته باشد )  ویژگی draggable را به true تنظیم کنید:

 <img draggable="true">

 

حتما بخوانید:  عناصر فرم های html

چه عنصری برای کشیدن است  – ondragstart و setData ()

سپس، مشخص کنید چه اتفاقی می افتد وقتی عنصر ی کشیده می شود.

در مثال بالا، attribute ondragstart یک تابع را فراخوانی می کند، drag (event)، که مشخص می کند چه اطلاعاتی کشیده می شود.

روش dataTransfer.setData () نوع داده و مقدار داده های کشیده شده را تنظیم می کند:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
} 

در این مورد، نوع داده “text” است و مقدار شناسه عنصر draggable ، مقدار (“drag1”) می باشد.

 

عمل انداختن چطور انجام می شود – ondragover

رویداد ondragover مشخص می کند که کدام داده می تواند انداخته شود.

به طور پیش فرض، داده ها / عناصر را نمی توان در عناصر دیگر انداخت.  برای اجازه  به انداختن، ما باید از رفتار پیش فرض عنصر جلوگیری کنیم.

این کار با فراخوانی روش event.preventDefault () برای رویداد indragover انجام می شود:

 event.preventDefault()

عمل کشیدن و انداختن را انجام دهید.

هنگامی که داده های کشیدن  را رها می کنیم ، عمل رها کردن اتفاق می افتد.

در مثال بالا، ویژگی  atdrop یک تابع drop(event) را فراخوانی می کند :

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

توضیح کد:

call preventDefault ()  را فراخوانی کنید تا مانع از این شود که مرورگر به صورت پیش فرض به داده ها دسترسی داشته باشد   (به طور پیش فرض به عنوان لینک برای انداختن باز است)
داده های کشیده  شده را با روش dataTransfer.getData () دریافت کنید. این روش هر نوع اطلاعاتی را که در روش setData () برای همان نوع تنظیم شده  را بازمی گرداند.
داده کشیده شده، شناسه عنصر کشیده شده است (drag1)
عنصر کشیده  شده را به عنصر رها  شده اضافه کنید.

حتما بخوانید:  کامنت ها در html
امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هجده + هفت =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی