کشیدن و رها کردن (Drag and Drop)
«کشیدن و رها کردن (Drag and Drop)» یعنی با ماوس بگیری و جابه جا کنی. «API» یعنی رابط برنامه نویسی با توابع آماده. با این API، یک عنصر را می کشیم و در ناحیه مقصد رها می کنیم. سپس مرورگر کار را انجام می دهد.
نمونه سریع کشیدن و رها کردن
در این نمونه، یک تصویر را به داخل یک جعبه می اندازیم. داده انتقال، شناسه عنصر است.
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<\/script>
نکته: پیش فرض، رهاسازی ممنوع است. همیشه در ondragover از preventDefault() استفاده کن.
قابل کشیدن کردن عنصر (draggable)
برای کشیدنی شدن عنصر، ویژگی draggable را true بگذار.
<img id="img1" draggable="true">
شروع کشیدن: ondragstart و setData()
در شروع کشیدن، نوع داده و مقدار را تعیین کن. اینجا نوع «text» و مقدار «id» است.
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
<\/script>
اجازه رهاسازی: ondragover
برای اجازه رهاسازی، رفتار پیش فرض را متوقف کن. وگرنه رهاسازی انجام نمی شود.
<script>
function dragoverHandler(ev) {
ev.preventDefault();
}
<\/script>
انجام رهاسازی: ondrop
در رویداد drop، داده را بگیر و عنصر را به مقصد اضافه کن.
<script>
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<\/script>
نمونه بیشتر: کشیدن عنوان به جعبه
در این مثال، یک عنوان را داخل جعبه می اندازیم. رویدادها مشابه هستند.
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">W3Schools.com</h1>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<\/script>
پیوندهای مرتبط
برای ذخیره داده ساده، صفحه Web Storage را ببین. برای آشنایی با اجازه کاربر، Geolocation را مرور کن. و اگر لازم بود، راهنمای کشیدن و رها کردن را دوباره بخوان.
جمع بندی سریع
- draggable را true بگذار.
- در ondragstart، داده را setData کن.
- در ondragover، preventDefault را فراموش نکن.
- در ondrop، getData بگیر و append کن.
- پیام های واضح به کاربر نشان بده.