PDA

View Full Version : حرفه ای: jquery sortable grid


My_LoVe_IRAN
سه شنبه 03 دی 1392, 20:33 عصر
سلام به همه دوستان
یه سوال داشتم ،من این کد رو از سایتی گرفتم و میخام یه تغییر کوچولو توش بدم اما نمیتونم !!!
تو این کد وقتی شما سورت میکنین مربع ها میرن تو جاهای خالی اما من نمیخام اینطوری باشه ! من میخام حدود 20 تا جای خالی باشه و هر کدوم از مربع ها رو تو این جا های خلی که گذاشتم همونجا بمونه ! (تعداد مربع ها 12 تا و تعداد جاهای خالی 20 تا نه اینکه 12 به 12 باشه) چطور باید این کار رو بکنم ؟
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>

<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>


</body>
</html>
My_LoVe_IRAN
پنج شنبه 05 دی 1392, 13:09 عصر
کسی از دوستان جوابی نداره ؟
Javidhb
پنج شنبه 05 دی 1392, 13:35 عصر
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
.sortable-placeholder{border: 1px solid black;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "sortable-placeholder"
});
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>

</ul>
</body>
</html>


منبع (http://api.jqueryui.com/sortable/#option-placeholder)

برای المنتهایی که میخاید نقش placeholder رو داشته باشن یه کلاس مجزا تعریف میکنید... و موقع که sortable رو صدا میزنید اسم اون کلاس رو هم ست کنید.
میتونید برای اون کلاس هم style مورد نظرتون رو اعمال کنید (بالا border داده شده)
My_LoVe_IRAN
شنبه 07 دی 1392, 10:40 صبح
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
.sortable-placeholder{border: 1px solid black;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "sortable-placeholder"
});
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>
<li class="sortable-placeholder"></li>

</ul>
</body>
</html>


منبع (http://api.jqueryui.com/sortable/#option-placeholder)

برای المنتهایی که میخاید نقش placeholder رو داشته باشن یه کلاس مجزا تعریف میکنید... و موقع که sortable رو صدا میزنید اسم اون کلاس رو هم ست کنید.
میتونید برای اون کلاس هم style مورد نظرتون رو اعمال کنید (بالا border داده شده)

خیلی ممنون
یه مشکل کوچیک داره ،وقتی عددی مثل 1 رو میاریم پایین کله اعداد یکی میره جلو ،نمیشه کاری کرد اونها تکون نخورن ؟
چون دوباره باید از اول چید و هی همین اتفاق میفته !!!
وم اینکه ایا میشه اینو به صورت ارایه تو دیتا بیس ذخیره کرد ؟؟؟
Javidhb
شنبه 07 دی 1392, 11:50 صبح
خیلی ممنون
یه مشکل کوچیک داره ،وقتی عددی مثل 1 رو میاریم پایین کله اعداد یکی میره جلو ،نمیشه کاری کرد اونها تکون نخورن ؟
چون دوباره باید از اول چید و هی همین اتفاق میفته !!!
وم اینکه ایا میشه اینو به صورت ارایه تو دیتا بیس ذخیره کرد ؟؟؟

اون خاصیت sortable که بقیه تکون بخورن و جای خالی رو پر کنن...

اون چیزی که شما دنبالش هستید رو میتونید با draggable (http://jqueryui.com/draggable/)و droppable (http://jqueryui.com/droppable/)بسازید.
My_LoVe_IRAN
شنبه 07 دی 1392, 11:53 صبح
اون خاصیت sortable که بقیه تکون بخورن و جای خالی رو پر کنن...

اون چیزی که شما دنبالش هستید رو میتونید با draggable (http://jqueryui.com/draggable/)و droppable (http://jqueryui.com/droppable/)بسازید.

خب تو draggable , droppable که اصلا چنین کاری نمیشه کرد ،نمیشه یه جای خالی درست کرد و اینو گذاشت توش و ... ؟ میشه ؟
من هر چی گشتم همه با sirtable این کار رو کردن !!!
Javidhb
شنبه 07 دی 1392, 13:20 عصر
اینجا (http://stackoverflow.com/questions/2209029/jquery-sortable-with-original-position-placeholder/2209850#2209850)سوال شما رو پرسیدن.. من تست کردم.. جواب ندادن... بغیر helper: clone (http://jsfiddle.net/96uKJ/) که بعید میدونم بازم بدردتون بخوره. (تا وقتی که دکمه موس رو رها نکید، مکان اولیه رو حفظ میکنه)

شما بگید که میخاید چیکار کنید... برای چی میخاید از این کد استفاده کنید؟

draggable و droppable انعطاف بیشتری دارن... (مثال (http://jsfiddle.net/dirtyd77/Y8dLz/)- منبع (http://stackoverflow.com/questions/16118853/jquery-draggable-droppable-and-sortable-combined))
My_LoVe_IRAN
شنبه 07 دی 1392, 16:48 عصر
اینجا (http://stackoverflow.com/questions/2209029/jquery-sortable-with-original-position-placeholder/2209850#2209850)سوال شما رو پرسیدن.. من تست کردم.. جواب ندادن... بغیر helper: clone (http://jsfiddle.net/96uKJ/) که بعید میدونم بازم بدردتون بخوره. (تا وقتی که دکمه موس رو رها نکید، مکان اولیه رو حفظ میکنه)

شما بگید که میخاید چیکار کنید... برای چی میخاید از این کد استفاده کنید؟

draggable و droppable انعطاف بیشتری دارن... (مثال (http://jsfiddle.net/dirtyd77/Y8dLz/)- منبع (http://stackoverflow.com/questions/16118853/jquery-draggable-droppable-and-sortable-combined))

فکر کنین صفحه شطرنجه که میخایم مهره ها رو توش بچینم ،هر طور که دوست دارم و با 1 دکمه جای مهره ها باید تو دیتابیس ذخیره بشه !!!
My_LoVe_IRAN
شنبه 07 دی 1392, 16:53 عصر
تو بازی خانوارز ،قسمت سبک ارتش این حرکت رو دیدم ،دقیقا همونو میخام در بیارم که نمیشه !!!
تا جایی که از کد اونها متوجه شدم از drog and drop استفاده کرده اما من جایی ندیدم این چیز رو ،فقط با sortable دیدم
به جز اینو
http://jsfiddle.net/kvVkT/
که خیلی پیچیدست
Javidhb
یک شنبه 08 دی 1392, 01:00 صبح
اگه همون شطرنج رو در نظر بگیریم:

توی هر خونه یه المنت میتونه قرار بگیره... و خونه ها هم میتونن خالی باشن و ترتیبشون هم مهم نیست.
نتیجه این میشه که شما بیخیال sortable بشید ... (بعیده با اون بشه)

اما:
با draggable یا droppable اینکار شما راحت قابل اجراست...
خونه هاتون draggable میشن و المنتها droppable،
با استفاده از متدها و optionهاشون هم میتونید چک کنید کدوم المنت توی کدوم خونه ها میتونه بره یا حتی المنتی که توی اون خونه هست رو حذف کنه!
آموزش و توضیح هم برای اینکار زیاده، مثلا این (http://jsfiddle.net/pabo/7M3WJ/)- منبع (http://stackoverflow.com/questions/9770935/making-a-chess-game-with-jquery-ui-i-have-used-draggable-but-i-need-to-make-th)

اینم برای شروع (http://diovo.com/2011/12/chess-programming-in-javascript-part-1/) (اون آرایه هایی هم که پرسیدید اینجا توضیح داده)
My_LoVe_IRAN
یک شنبه 08 دی 1392, 21:45 عصر
اگه همون شطرنج رو در نظر بگیریم:

توی هر خونه یه المنت میتونه قرار بگیره... و خونه ها هم میتونن خالی باشن و ترتیبشون هم مهم نیست.
نتیجه این میشه که شما بیخیال sortable بشید ... (بعیده با اون بشه)

اما:
با draggable یا droppable اینکار شما راحت قابل اجراست...
خونه هاتون draggable میشن و المنتها droppable،
با استفاده از متدها و optionهاشون هم میتونید چک کنید کدوم المنت توی کدوم خونه ها میتونه بره یا حتی المنتی که توی اون خونه هست رو حذف کنه!
آموزش و توضیح هم برای اینکار زیاده، مثلا این (http://jsfiddle.net/pabo/7M3WJ/)- منبع (http://stackoverflow.com/questions/9770935/making-a-chess-game-with-jquery-ui-i-have-used-draggable-but-i-need-to-make-th)

اینم برای شروع (http://diovo.com/2011/12/chess-programming-in-javascript-part-1/) (اون آرایه هایی هم که پرسیدید اینجا توضیح داده)

هیچکدوم از نمونه کد ها واسه من کار نکرد ،نمیدونم چرا !!!
گفتم که یه چیزی شبیه به شطرنج میخام نه خود شطرنج ،در اصل همون چیزی که تو سایت خانوارز تو قسمت سبک ارتش هست رو میخام !!
اما حرف شما درسته ،مثل اینکه فقط با drog , drop باید کار کنم !!!
مرسی
تشکر از راهنماییتون