الیاس سخاوتی نیا
4 سال پیش توسط الیاس سخاوتی نیا مطرح شد
25 پاسخ

جا به جایی آیتم های یک لیست با درگ اند دراپ

سلام دوستان
من یه لیست دارم که میخوام اینا رو با درگ اند دراپ مرتب سازی کنم
یعنی مثلا آیتم سومی رو بیارم اول
هم نیاز به سمپل کد html و css دارم
و هم اینکه برای بکند و دیتابیسش میشه راهنمایی کنید که چجوری باید پیاده بشه؟ (php خام)
تشکر

@milad @mohsenbostan


ثبت پرسش جدید
آرین حسینی
تخصص : Solidity Developer. Blockchai...
@arian 4 سال پیش مطرح شد
2

سلام وقت بخیر
یک نگاهی به این آموزش بندازید.


الیاس سخاوتی نیا
تخصص : علاقه‌مند به برنامه‌‎نویسی
@elyassir 4 سال پیش مطرح شد
2

@arian
ممنون اما خب متاسفانه نمیشه قسمت تکی رو خریداری کرد و منم فرانت کار نیستم که کل دوره رو بگیرم نیازم نمیشه


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
الیاس سخاوتی نیا
تخصص : علاقه‌مند به برنامه‌‎نویسی
@elyassir 4 سال پیش مطرح شد
2

@milad

خیلی ممنونم ازتون همون اولی قسمت simple-list کار من رو راه میندازه فقط چجوری باید راه اندازی کنم؟
من از کتابخونه و فریمورک خاصی استفاده نمیکنم همینجوری توی یه صفحه html میخوام


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
2

فکر نکنم این کار ربطی به بک اند داشته باشه کل کار مربوط به فرانت میشه


الیاس سخاوتی نیا
تخصص : علاقه‌مند به برنامه‌‎نویسی
@elyassir 4 سال پیش مطرح شد
1

@hosseinshirinegad98

بله اما یه پروژه شخصی دارم که فرانتش هم خودم برای خودم زدم و این مورد رو نیاز دارم

  • اینکه این ترتیب لیست باید توی دیتابیس ذخیره بشه
    به نظر شما یه ستون به نام sort در نظر بگیرم خوبه؟

حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
2

اگه میخوای چیدمانش فقط در فرانت بدون بارگذاری مجدد صفحه مرتب بشه اصلا به بک اند فکر نکن اما اگر این جابجایی نیازه که ذخیره بشه باید این جابجایی رو در بکاند هم ذخیرش کنی. ستون sort کمکی بهت نمی کنه


الیاس سخاوتی نیا
تخصص : علاقه‌مند به برنامه‌‎نویسی
@elyassir 4 سال پیش مطرح شد
1

@hosseinshirinegad98

ببینید من یه لیستی دارم که به کاربر نشون داده میشه
حالا مدیر توی پنل مدیریت میخواد این لیست رو جا به جا کنه و این ترتیب لیست ذخیره بشه و کاربر لیست رو به همین ترتیبی که مدیر ذخیره کرده ببینه
اگه ستون sort کمکی نمیکنه پس باید چیکار کنم؟


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
2

میتونی در فرانت ترتیبشونو در یک آرایه داشته باشی هر زمان جابجایی انجام گرفت در آرایه هم انجام شه سپس آرایه رو بدی بک اند و در دیتابیس ذخیره کنی.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
2

دیگه برای نحوه ی استفاده ازش باید به مستندات و مثال هاش رجوع کنید و طبق اون پیش برید.
https://github.com/SortableJS/Sortable
http://sortablejs.github.io/Sortable


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
2

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

<!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>

حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
2

برای این جابجایی کتابخونه جی کوئری هست.
اما ذخیره در جدولو در جریانش نیستم
باید خودت دستی این کارو انجام بدی.
پیاده سازی دستیش هم نیاز به مقداری دانش فنی در کد زنی داره.
@hosseinshirinegad98


الیاس سخاوتی نیا
تخصص : علاقه‌مند به برنامه‌‎نویسی
@elyassir 4 سال پیش مطرح شد
2

@hosseinshirinegad98
بله درسته باید دستی پیاده بشه ممنون
یه ترفندی میزنم :)

@milad
خیلی خیلی ممنونم بابت کدی که نوشتین
فقط یه سوال
چطوریه میشه این سه تا li که نوشتین رو توی یه آرایه (توی js مثلا) ریخت و با جا به جایی اون آرایه هم جا به جا بشه؟


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
3

از بک اند لیستو بده کلاینت و در یه آرایه جی اسی ذخیره کن.مثل آب خوردن.
مهمترین بخشش همین جابجایی آرایه با هنگام درگ اند دراپ شدن هست@elyasbeshkani


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
2

البته شاید این کتابخونه راهی برای برقرای ارتباط با سرور هم داشته باشه اگه بتونید پیداش کنید که خیلی خوب خواهد بود. به راحتی لیستو ازش میگیرین و شاید هم این جابجایی رو خودش انجام داده باشه. و کار شما تنها این خواهد بود که در سرور سیوش کنی.@elyasbeshkani


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
3

من روی این جابجایی مقداری فکر میکنم اگه جوابی گرفتم بهتون میگم.@elyasbeshkani


احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
2

@elyasbeshkani
سلام و وقت بخیر
برای اینکه تو فرانت اند جابه‌جا بشه که دوستان راهنمایی های لازم رو کردن
برای بک اند هم میتونید از flex-box استفاده کنید و order ها رو توی یک ستونِ جدولتون برای هر record داشته باشید و بعد مثلاً توی یه حلقه for each میخواید المنت ها رو نمایش بدید میتونید order رو به صورت inline برای هر المنت مقدار دهی کنید اینجوری میتونید اون ترتیبی که ایجاد کردید رو حفظ و ویرایش کنید
موفق و سلامت باشید
یا حق


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
2

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

این رو ببینید: در بخش کنسول مرورگر، بروزرسانی فهرست قابل مشاهده هستش.

<!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>

حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
2

کدها آمادست فقط ساختار لیست شما باید به نحوی که من نوشتم باشه یعنی یه کلاس به نام 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>

حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
1

یه نکته مهم اینجا ما یک لیستو به سرور پاس دادیم و قاعدتا هم باید اون طرف یک آرایه دریافت کنیم اما بیشتر مواقع اینطور نیست و بجای آرایه یه رشته به ما میده که جا داره شما ابتدا رشته رو با تابع

explode( "," ,$list )

به لیست تبدیل کنی سپس سیو کنی و تمام.
@elyasbeshkani


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام