API کشیدن و رها کردن در HTML این قابلیت را فراهم می‌کند که یک عنصر (element) کشیده و رها شود.
کشیدن و رها کردن یک ویژگی بسیار رایج است. این عمل زمانی اتفاق می‌افتد که شما یک شیء را «می‌گیرید» و آن را به مکان دیگری می‌کشید.
اعداد داخل جدول، اولین نسخه از مرورگر را مشخص می‌کنند که به‌طور کامل از قابلیت کشیدن و رها کردن پشتیبانی می‌کند.
مثال زیر یک نمونه ساده از کشیدن و رها کردن است:
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>
<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"
/>
</body>
</html>شاید پیچیده به نظر برسد، اما بیایید تمام بخش‌های مختلف یک رویداد کشیدن و رها کردن را بررسی کنیم.
اول از همه: برای اینکه یک عنصر قابل کشیدن باشد، صفت (attribute) draggable آن را برابر true قرار دهید:
<img id="img1" draggable="true">
<p id="p1" draggable="true">Draggable text</p>
ondragstart و setData()سپس، مشخص کنید که وقتی عنصر کشیده می‌شود، چه اتفاقی باید بیفتد.
در مثال بالا، صفت ondragstart در عنصر <img> یک تابع (dragstartHandler(ev)) را فراخوانی می‌کند که مشخص می‌کند چه داده‌ای باید کشیده شود.
متد dataTransfer.setData() نوع داده و مقدار داده‌ی کشیده‌شده را تنظیم می‌کند:
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}در این مورد، نوع داده "text" و مقدار آن، شناسه‌ی (id) عنصر قابل کشیدن ("img1") است.
ondragoverصفت ondragover در عنصر <div> یک تابع (dragoverHandler(ev)) را فراخوانی می‌کند که مشخص می‌کند داده‌ی کشیده‌شده کجا می‌تواند رها شود.
به‌طور پیش‌فرض، داده‌ها/عناصر نمی‌توانند در عناصر دیگر رها شوند. برای اجازه دادن به عمل رها کردن، باید از رفتار پیش‌فرض عنصر جلوگیری کنیم.
این کار با فراخوانی متد preventDefault() برای رویداد ondragover انجام می‌شود:
function dragoverHandler(ev) {
ev.preventDefault();
}ondropوقتی داده‌ی کشیده‌شده رها می‌شود، یک رویداد drop (رها کردن) رخ می‌دهد.
در مثال بالا، صفت ondrop در عنصر <div> یک تابع به نام dropHandler(event) را فراخوانی می‌کند:
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}توضیح کد:
متد preventDefault() را فراخوانی کنید تا از رفتار پیش‌فرض مرورگر در قبال داده جلوگیری شود (رفتار پیش‌فرض این است که داده را به‌عنوان یک لینک باز کند).
داده‌ی کشیده‌شده را با متد dataTransfer.getData() دریافت کنید. این متد هر داده‌ای را که با همان نوع در متد setData() تنظیم شده باشد، برمی‌گرداند.
داده‌ی کشیده‌شده، شناسه‌ی عنصر کشیده‌شده است ("img1").
عنصر کشیده‌شده را به عنصر مقصد (جایی که رها می‌شود) اضافه کنید (Append کنید).
چگونه یک عنصر <h1> را بکشیم و در یک عنصر <div> رها کنیم:
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">
codoloper.com
</h1>
</body>
</html>چگونه یک عنصر <a> را بکشیم و در یک عنصر <div> رها کنیم:
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<a id="link1" href="https://codoloper.com" draggable="true" ondragstart="dragstartHandler(event)">codoloper.com</a>
</body>
</html>این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/