جا به جایی آیتم های یک لیست با درگ اند دراپ
سلام دوستان
من یه لیست دارم که میخوام اینا رو با درگ اند دراپ مرتب سازی کنم
یعنی مثلا آیتم سومی رو بیارم اول
هم نیاز به سمپل کد html و css دارم
و هم اینکه برای بکند و دیتابیسش میشه راهنمایی کنید که چجوری باید پیاده بشه؟ (php خام)
تشکر
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@arian
ممنون اما خب متاسفانه نمیشه قسمت تکی رو خریداری کرد و منم فرانت کار نیستم که کل دوره رو بگیرم نیازم نمیشه
خیلی ممنونم ازتون همون اولی قسمت simple-list کار من رو راه میندازه فقط چجوری باید راه اندازی کنم؟
من از کتابخونه و فریمورک خاصی استفاده نمیکنم همینجوری توی یه صفحه html میخوام
بله اما یه پروژه شخصی دارم که فرانتش هم خودم برای خودم زدم و این مورد رو نیاز دارم
- اینکه این ترتیب لیست باید توی دیتابیس ذخیره بشه
به نظر شما یه ستون به نام sort در نظر بگیرم خوبه؟
اگه میخوای چیدمانش فقط در فرانت بدون بارگذاری مجدد صفحه مرتب بشه اصلا به بک اند فکر نکن اما اگر این جابجایی نیازه که ذخیره بشه باید این جابجایی رو در بکاند هم ذخیرش کنی. ستون sort کمکی بهت نمی کنه
ببینید من یه لیستی دارم که به کاربر نشون داده میشه
حالا مدیر توی پنل مدیریت میخواد این لیست رو جا به جا کنه و این ترتیب لیست ذخیره بشه و کاربر لیست رو به همین ترتیبی که مدیر ذخیره کرده ببینه
اگه ستون sort کمکی نمیکنه پس باید چیکار کنم؟
میتونی در فرانت ترتیبشونو در یک آرایه داشته باشی هر زمان جابجایی انجام گرفت در آرایه هم انجام شه سپس آرایه رو بدی بک اند و در دیتابیس ذخیره کنی.
دیگه برای نحوه ی استفاده ازش باید به مستندات و مثال هاش رجوع کنید و طبق اون پیش برید.
https://github.com/SortableJS/Sortable
http://sortablejs.github.io/Sortable
این مثال ساده رو هم نوشتم براتون که ببینید چیز خاصی نداره:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sortable</title>
<style>
</style>
</head>
<body>
<h1> Salam, Salam </h1>
<ul id="example1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
</script>
</body>
</html>برای این جابجایی کتابخونه جی کوئری هست.
اما ذخیره در جدولو در جریانش نیستم
باید خودت دستی این کارو انجام بدی.
پیاده سازی دستیش هم نیاز به مقداری دانش فنی در کد زنی داره.
@hosseinshirinegad98
@hosseinshirinegad98
بله درسته باید دستی پیاده بشه ممنون
یه ترفندی میزنم :)
@milad
خیلی خیلی ممنونم بابت کدی که نوشتین
فقط یه سوال
چطوریه میشه این سه تا li که نوشتین رو توی یه آرایه (توی js مثلا) ریخت و با جا به جایی اون آرایه هم جا به جا بشه؟
از بک اند لیستو بده کلاینت و در یه آرایه جی اسی ذخیره کن.مثل آب خوردن.
مهمترین بخشش همین جابجایی آرایه با هنگام درگ اند دراپ شدن هست@elyasbeshkani
البته شاید این کتابخونه راهی برای برقرای ارتباط با سرور هم داشته باشه اگه بتونید پیداش کنید که خیلی خوب خواهد بود. به راحتی لیستو ازش میگیرین و شاید هم این جابجایی رو خودش انجام داده باشه. و کار شما تنها این خواهد بود که در سرور سیوش کنی.@elyasbeshkani
@elyasbeshkani
سلام و وقت بخیر
برای اینکه تو فرانت اند جابه‌جا بشه که دوستان راهنمایی های لازم رو کردن
برای بک اند هم میتونید از flex-box استفاده کنید و order ها رو توی یک ستونِ جدولتون برای هر record داشته باشید و بعد مثلاً توی یه حلقه for each میخواید المنت ها رو نمایش بدید میتونید order رو به صورت inline برای هر المنت مقدار دهی کنید اینجوری میتونید اون ترتیبی که ایجاد کردید رو حفظ و ویرایش کنید
موفق و سلامت باشید
یا حق
شما سعی کنید به این کتابخانه سر بزنید و مستنداتش رو مطالعه کنید.
من یک نگاهی انداختم و یک راه حل دم دستی هم براتون نوشتم. چه بسا بهتر ازین هم بشه صورت داد. خیلی تحلیل نکردم مسئله تون رو.
این رو ببینید: در بخش کنسول مرورگر، بروزرسانی فهرست قابل مشاهده هستش.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sortable</title>
<style>
</style>
</head>
<body>
<h1> Salam, Salam </h1>
<ul id="example1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class',
onSort: function (evt) {
var ul = document.querySelector('#example1');
var lists = ul.querySelectorAll('li');
console.log(lists);
let data = [];
for (var i = 0; i < lists.length; i++) {
data[i] = lists[i].innerHTML;
}
console.log(data);
},
});
</script>
</body>
</html>کدها آمادست فقط ساختار لیست شما باید به نحوی که من نوشتم باشه یعنی یه کلاس به نام li بهشون اضافه کنین. یه کتابخونه جی کوئری هم به صفحه لینک کنید چون بروزرسانی در جدول با ایجکس انجام میشه.
یه دکمه هم لازم هست برای بروزرسانی.
روش کار به این صورت است ابتدا مدیر هر تغییر و جابجایی که خواست رو لیست انجام میده در نهایت با زدن دکمه save تغییرات در جدول بروزرسانی میشه. برای این کار یه متد اختصاصی نوشته شده.
میمونه کدهای سمت سرور که خودتون باید بنویسید.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sortable</title>
<style>
</style>
</head>
<body>
<h1> Salam, Salam </h1>
<ul id="example1">
<li class="li">item 1</li>
<li class="li">item 2</li>
<li class="li">item 3</li>
</ul>
<button onclick="save_sort_list()" style="padding: 10px; background:skyblue; color:black;">Save</button>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<!-- // کتابخونه جی کوئری -->
<script src="./jquery-3.3.1.slim.min.js"></script>
<script>
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
function save_sort_list() {
var list = [];
var li_list = document.getElementsByClassName('li');
for (li of li_list) {
list.push(li.innerHTML);
}
console.log(list);
$.ajax({
url: 'backend_code.php',
type:'post',
data:{'data' : list},
success:function(data) {
alert('مرتب سازی در دیتابیس بروزرسانی شد');
}
});
}
</script>
</body>
</html>یه نکته مهم اینجا ما یک لیستو به سرور پاس دادیم و قاعدتا هم باید اون طرف یک آرایه دریافت کنیم اما بیشتر مواقع اینطور نیست و بجای آرایه یه رشته به ما میده که جا داره شما ابتدا رشته رو با تابع
explode( "," ,$list )به لیست تبدیل کنی سپس سیو کنی و تمام.
@elyasbeshkani