از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
کشیدن و رها کردن در جاوا اسکریپت Vanilla عمل انتخاب یک آیتم یا تکه‌ای از متن، جابجایی آن (کشیدن) و سپس قرار دادن آن (رها کردن) در مکانی دیگر به عنوان قابلیت کشیدن و رها کردن شناخته می‌شود. اکثر مرورگرها انتخاب متن، تصاویر و پیوندها را به طور پیش فرض قابل کشیدن می کنند. برای مثال، اگر تصاویر یا نشان‌واره‌های مبتنی بر تصویر را بکشید روی هر …
سرفصلهای مطلب
معرفی
عمل انتخاب یک مورد یا تکه ای از متن، جابجایی آن (کشیدن) و سپس قرار دادن آن (انداختن) در مکان دیگری توصیف شده است به عنوان شناخته شده است قابلیت کشیدن و رها کردن.
اکثر مرورگرها انتخاب متن، تصاویر و پیوندها را به طور پیش فرض قابل کشیدن می کنند. به عنوان مثال ، اگر تصاویر یا لوگوتایپ مبتنی بر تصویر را می کشید روی هر وب سایت، یک “تصویر روح“ظاهر خواهد شد (این برای SVG کار نمی کند ، زیرا این تصاویر نیستند).
توجه داشته باشید: برای تهیه انواع دیگر محتوا قابل استفاده ، باید از آنها استفاده کنید HTML5 Drag and Drop (DnD) APIs یا یک کتابخانه خارجی جاوا اسکریپت.
در این دست ها روی راهنمای، ما نگاهی به روش پیاده سازی خواهیم داشت کشیدن و انداختن در JavaScript با استفاده از API Drag و Drop (DND) و یک کتابخانه JavaScript خارجی ، قابل مرتب سازی.
تخته Kanban بسیار محبوب ، Trello ، از Drag-and-Drop استفاده می کند تا حرکات کارت را از یک لیست به لیست دیگر آسانتر کند! در این راهنما ، ما در حال ساختن چیزی بسیار مشابه خواهیم بود.
با استفاده از HTML5 Drag and Drop API+
برای پیاده‌سازی قابلیت کشیدن و رها کردن در HTML4 معمولی، توسعه‌دهندگان مجبور بودند از برنامه‌نویسی دشوار جاوا اسکریپت یا سایر چارچوب‌های جاوا اسکریپت مانند jQuery و غیره استفاده کنند، اما HTML 5 یک API Drag and Drop (DnD) معرفی کرد که پشتیبانی DnD بومی را به مرورگر ارائه می‌کند و آن را ایجاد می‌کند. کد کردن خیلی راحت تره
کلیه مرورگرهای اصلی ، از جمله Chrome ، Firefox 3.5 و Safari 4 ، از این HTML 5 DND پشتیبانی می کنند.
ما می توانیم عملا هر عنصری را بسازیم روی وب سایت ما با استفاده از API قابل کشیدن است. با استفاده از ماوس ، کاربر ممکن است موارد قابل کشیدن را انتخاب کند ، آنها را به A بکشید قابل رها شدن عنصر ، سپس آنها را با انتشار دکمه ماوس رها کنید. این امر باعث می شود از الگوی رویداد DOM و رویدادهای Drag and Drop استفاده شود.
توجه داشته باشید: چندین نوع رویداد در طول عملیات درگ اخراج می شوند و رویدادهای خاصی مانند موارد drag و dragover حوادث، ممکن است چندین بار شلیک شود.
کشیدن و رها کردن رویدادها
تعدادی از رویدادها در مراحل مختلف روش کشیدن و رها شدن آغاز می شوند:
- کشیدن شروع: هنگامی که کاربر شروع به کشیدن مورد می کند ، این رویداد رخ می دهد.
- دراجنتر: هنگامی که ماوس برای اولین بار هنگام کشیدن روی عنصر هدف حرکت می کند، این رویداد فعال می شود.
- کشنده: هنگامی که یک کشیدن رخ می دهد ، این رویداد هنگامی که موش بر روی یک عنصر کشیده می شود ، شروع می شود. را process اتفاقی که در طول یک شنونده رخ می‌دهد، غالباً مانند رویداد dragenter است.
- کشیدن گلوله: هنگامی که ماوس هنگام کشیدن عنصری را ترک می کند ، این رویداد شروع می شود.
- کشیدن: هنگامی که ماوس در حالی که مورد در حال کشیدن است حرکت می کند، این رویداد فعال می شود.
- رها کردن: پس از اتمام عملیات کشیدن،
dropرویداد اخراج می شود روی عنصری که در آن سقوط رخ داده است. یک شنونده مسئول به دست آوردن داده های کشیده شده و قرار دادن آن در محل رها کردن خواهد بود. - dragend: هنگامی که کاربر هنگام کشیدن یک آیتم، دکمه ماوس را رها می کند، این رویداد رخ می دهد.
شروع شدن
بیایید یک کپی ساده از یک برد Trello بسازیم! نتیجه چیزی در این خطوط به نظر می رسد:
ایجاد پروژه و نشانه گذاری اولیه
بیایید ساختار اصلی را در HTML ایجاد کنیم – a container با چندین column عناصری که به عنوان لیستی از وظایف عمل می کنند. بگویید، فهرست اول، مربوط به “همه وظایف” ستون، در ابتدا همه وظایف را دارد که می‌توانیم آنها را بکشیم و به ستون‌های دیگر رها کنیم:
<div class="container">
<div class="column">
<h1>All Tasks</h1>
<div class="item">Wash Clothes</div>
<div class="item">Meeting at 9AM</div>
<div class="item">Fix workshop</div>
<div class="item">Visit the zoo</div>
</div>
<div class="column">
<h1>In progress</h1>
</div>
<div class="column">
<h1>Paused</h1>
</div>
<div class="column">
<h1>Under Review</h1>
</div>
<div class="column">
<h1>Completed</h1>
</div>
</div>
بیایید سبک ابتدایی را به آن اضافه کنیم container، columnشن items:
.container{
font-family: "Trebuchet MS", sans-serif;
display: flex;
gap: 30px;
}
.column{
flex-basis: 20%;
background: #ddd;
min-height: 90vh;
padding: 20px;
border-radius: 10px;
}
.column h1{
text-align: center;
font-size: 22px;
}
.item{
background: #fff;
margin: 20px;
padding: 20px;
border-radius: 3px;
cursor: pointer;
}
.invisible{
display: none;
}
را page باید چیزی در این راستا نگاه کرد:
ساخت یک شیء قابل کشیدن
اگرچه این اشیاء هنوز قابل کشیدن نیستند. آنها فقط آنجا هستند! برای اینکه یک شی قابل کشیدن باشد – آن را تنظیم می کنیم draggable نسبت به true. هر چیزی روی وب سایت شما، از جمله عکس ها، فایل ها، لینک ها و فایل ها را می توان درگ کرد!
تنظیم کنیم draggable="true" روی ما item عناصر:
<div class="column">
<h1>All Tasks</h1>
<div class="item" draggable="true">Wash Clothes</div>
<div class="item" draggable="true">Meeting at 9AM</div>
<div class="item" draggable="true">Fix workshop</div>
<div class="item" draggable="true">Visit the zoo</div>
</div>
اکنون که عناصر قابل کشیدن هستند، می توانند رویدادهای کشیدن را منتشر کنند! بیایید شنوندگان رویداد را تنظیم کنیم تا آنها را انتخاب کنند و به رویدادها واکنش نشان دهند.
مدیریت رویدادهای Drag-and-Drop با جاوا اسکریپت
بیایید همه موارد و ستون ها را جمع آوری کنیم روی که می خواهیم کشیدن و رها کردن را پیاده سازی کنیم. ما به راحتی می توانیم آنها را با استفاده از document.querySelectorAll() انتخابگرهای DOM! این یک را به همراه خواهد داشت NodeList آرایه ای که می توانیم روی آن حلقه بزنیم تا با هر آیتم/ستون مجزا کار کنیم:
const items = document.querySelectorAll('.item')
const columns = document.querySelectorAll('.column')
به طور طبیعی – اگر لیستی از موارد برای کار ندارید، می توانید آنها را به صورت جداگانه انتخاب کنید!
بیایید عناصر را مرور کنیم و به هر کدام یک شنونده رویداد اضافه کنیم. یک شنونده رویداد برای آن اضافه می کنیم dragstart و dragend رویدادها و توابعی که باید هنگام اجرا اجرا شوند:
items.forEach(item => {
item.addEventListener('dragstart', dragStart)
item.addEventListener('dragend', dragEnd)
});
dragStart() اجرا خواهد شد روی هر یک 'dragstart' رویداد، و dragEnd() اجرا خواهد شد روی هر یک 'dragend' رویداد.
توجه داشته باشید: از این توابع می توان برای افزودن یک ظاهر طراحی برای تعامل بصری بهتر زمانی که کاربران یک مورد خاص را می کشند و رها می کنند، مانند انیمیشن صاف کارتی که در حال جابجایی هستید، استفاده می شود.
بیایید عملکرد را فقط با ورود به سیستم پیام ها آزمایش کنیم:
function dragStart() {
console.log('drag started');
}
function dragEnd() {
console.log('drag ended');
}
عالی! هنگامی که یک عنصر به اطراف کشیده می شود – رویدادها در حال شلیک هستند. اکنون، به جای اینکه فقط پیام را ثبت کنیم، به جای آن نام کلاس را روی کارت اعمال کنیم. بیایید کار را با نامرئی کردن کارت منتقل شده شروع کنیم تا از لیست اصلی محو شود. ما به عنصر کشیده شده استایل می دهیم و منطق اضافه می کنیم تا کمی بعد در لیست جدیدی ظاهر شود.
لازم نیست عنصر ناپدید شود. همچنین می توانید با تنظیم کدورت آن را محو کنید تا نشان دهید که از یک مکان به مکان دیگر کشیده می شود. با خیال راحت خلاق شوید!
بیایید اصلاح کنیم dragStart() تابع:
function dragStart() {
console.log('drag started');
setTimeout(() => this.className = 'invisible', 0)
}
اکنون – ما فقط با کارت ها تعامل نداریم. ما همچنین می خواهیم با هر کدام تعامل داشته باشیم ستون برای پذیرش کارت جدید و حذف کارت ها از ستون های قدیمی. برای این کار، می خواهیم متدهایی را در هنگام رویداد اجرا کنیم روی ستون ها آتش می گیرند، درست مانند موارد!
بیایید مرور کنیم و شنوندگان رویداد را به آن اضافه کنیم columns:
columns.forEach(column => {
column.addEventListener('dragover', dragOver);
column.addEventListener('dragenter', dragEnter);
column.addEventListener('dragleave', dragLeave);
column.addEventListener('drop', dragDrop);
});
بیایید شنوندگان رویداد را آزمایش کنیم:
function dragOver() {
console.log('drag over');
}
function dragEnter() {
console.log('drag entered');
}
function dragLeave() {
console.log('drag left');
}
function dragDrop() {
console.log('drag dropped');
}
هنگامی که این مورد را در مرورگر خود مشاهده می کنید، هنگامی که موارد را درگ می کنید، باید ناپدید شوند و console هنگام عبور از یک ستون جدید با آیتم، لاگ ها باید ظاهر شوند:
توجه داشته باشید: اگر به دقت بررسی کنید console منطقه، شما متوجه خواهید شد که dragDrop() متد پیامی را ثبت نکرد. برای انجام این کار، باید رفتار پیش‌فرض را غیرفعال کنید dragOver() روش.
function dragOver(e) {
e.preventDefault()
console.log('drag over');
}
اکنون، وقتی مورد را رها می کنید، متوجه خواهید شد که “کشیدن رها شد” ثبت شده است.
اینها تمام اتفاقاتی است که ما به آن نیاز داریم! اکنون، ما فقط می‌خواهیم منطق حذف آیتم‌ها، اضافه کردن آنها به ستون‌های جدید در صورت حذف شدن، و غیره را پیاده‌سازی کنیم. از آنجایی که تنها یک آیتم وجود دارد که در یک نقطه از زمان کشیده می‌شویم، بیایید یک متغیر سراسری برای آن ایجاد کنیم. از آنجایی که ما معمولاً مرجع را تغییر می دهیم، یک خواهد بود let، نه a const.
هنگامی که کشیدن شروع می شود – تنظیم می کنیم this عنصر به dragItem، آن را به ستونی که به آن رها می کنیم اضافه می کنیم و روی آن تنظیم می کنیم null:
let dragItem = null;
function dragStart() {
console.log('drag started');
dragItem = this;
setTimeout(() => this.className = 'invisible', 0)
}
function dragEnd() {
console.log('drag ended');
this.className = 'item'
dragItem = null;
}
function dragDrop() {
console.log('drag dropped');
this.append(dragItem);
}
توجه داشته باشید: هر عنصری که رویدادها را ساطع می کند می تواند از طریق this کلمه کلیدی، در متد فراخوانی شده هنگام اجرا شدن رویداد.
همین – اکنون می توانیم کارت ها را از یک ستون به ستون دیگر بکشیم و رها کنیم:
ما نیازی به استفاده از همه رویدادهای موجود برای ایجاد این کار نداریم – آنها اضافه شده اند و می توانند برای سبک سازی بیشتر مورد استفاده قرار گیرند. process.
نکته ای که باید به آن توجه داشت این است که ما به ترتیب عناصر را به آن اضافه می کنیم پایان از هر ستون، همیشه، زیرا ما موقعیت نسبی آنها را پیگیری نمی کنیم و فقط تماس می گیریم append() وقتی لازم باشه. این به راحتی با قابل مرتب سازی کتابخانه!
پیاده سازی Drag and Drop با استفاده از SortableJS
Sortable یک ماژول جاوا اسکریپت سبک و ساده است که از API اصلی HTML5 drag and drop برای مرتب کردن لیستی از اشیاء استفاده می کند، درست مثل ما! با تمام مرورگرها و دستگاه های لمسی معاصر سازگار است.
برای مرتب کردن عناصر عالی است در داخل یک لیست و به شما امکان می دهد عناصر را در یک ستون، در موقعیت های مختلف بکشید و رها کنید، نه فقط بین ستون ها. این یک افزونه عالی برای برنامه ما خواهد بود!
در واقع – با استفاده از Sortable، می‌توانیم کل را کاملاً خودکار کنیم process با داشتن یک گروه از ستون ها، جایی که هر کدام می توانند موارد را به اشتراک بگذارند.
مرتب سازی را می توان از طریق CDN وارد کرد:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js" integrity="sha512-zYXldzJsDrNKV+odAwFYiDXV2Cy37cwizT+NkuiPGsa9X1dOz04eHvUWVuxaJ299GvcJT31ug2zO4itXBjFx4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
یا از طریق NPM نصب شده است:
$ npm install sortablejs --save
استفاده از Sortable به آسانی نمونه سازی یک است Sortable هدف – شی، روی یک عنصر HTML داده شده:
const column = document.querySelector('.column');
new Sortable(column, {
animation: 150,
ghostClass: 'blue-background-class'
});
مقدار مناسبی از ویژگی ها وجود دارد که می توانید برای سفارشی کردن آنها تنظیم کنید process – دو مورد از آنها را استفاده کرده ایم. را animation زمان انیمیشن است که در میلی ثانیه بیان می شود، در حالی که ghostClass می توان برای تلطیف چگونگی ظاهر “شبح” عنصر کشیده شده استفاده کرد! این باعث می شود تا تجربه بسیار بهتری از کشیدن یک عنصر را داشته باشید.
بیایید به مثال Trello خود برگردیم و Sortable را برای کار اعمال کنیم! ما را ملزم به استفاده از list-group-item کلاس به جای item:
<div class="container">
<div class="column">
<h1>All Tasks</h1>
<div class="list-group-item" draggable="true">Wash Clothes</div>
<div class="list-group-item" draggable="true">Take a stroll outside</div>
<div class="list-group-item" draggable="true">Design Thumbnail</div>
<div class="list-group-item" draggable="true">Attend Meeting</div>
<div class="list-group-item" draggable="true">Fix workshop</div>
<div class="list-group-item" draggable="true">Visit the zoo</div>
</div>
<div class="column">
<h1>In progress</h1>
</div>
<div class="column">
<h1>Paused</h1>
</div>
<div class="column">
<h1>Under Review</h1>
</div>
<div class="column">
<h1>Completed</h1>
</div>
</div>
بیایید همان سبک قبلی را اعمال کنیم:
.container {
font-family: "Trebuchet MS", sans-serif;
display: flex;
gap: 30px;
}
.column {
flex-basis: 20%;
background: #ddd;
min-height: 90vh;
padding: 5px;
border-radius: 10px;
}
.column h1 {
text-align: center;
font-size: 22px;
}
.list-group-item {
background: #fff;
margin: 20px;
padding: 20px;
border-radius: 5px;
cursor: pointer;
}
حال، بیایید a را نمونه کنیم Sortable برای هر ستون روی را page، تنظیم آنها group به "shared" بنابراین کارت ها بین ستون ها قابل اشتراک گذاری هستند:
const columns = document.querySelectorAll(".column");
columns.forEach((column) => {
new Sortable(column, {
group: "shared",
animation: 150,
ghostClass: "blue-background-class"
});
});
خودشه! Sortable از بقیه موارد مراقبت می کند:
نتیجه
در این مقاله نگاهی به روش کشیدن و رها کردن عناصر در HTML5 و همچنین استفاده از کتابخانه قابل مرتب‌سازی جاوا اسکریپت انداخته‌ایم.
منتشر شده در 1403-01-11 15:48:08
