جابه جایی اجزا [بایگانی]

mahdi.iqu

شنبه 16 آذر 1392, 00:50 صبح

با سلام
توسط چه کدی میشه عناصر وب رو با هم جابه جا کرد؟
فرضا من تو دایو دارم میخوام به کاربرم این اجازه رو بدم که بتونه به صورت عمودی این دو دایو رو با هم جا به جا کنه
توی نت یک کد پیدا کردم ولی به کارم نیومد به دو دلیل:
اول اینکه خیلی خشک اشیا رو جابه جا میکنه
و دوم اینکه کاربر میتونه در محور X , Y اشیا رو جا به جا کنه من میخوام فقط در محور Y بتونه جابه جایی رو انجام بده
تقریبا مثل پنل هاست Cpanel
ممنون میشم در این ضمینه کمکم کنید

Javidhb

شنبه 16 آذر 1392, 00:57 صبح

بهترین گزینه استفاده از jQueryUi هست:
http://jqueryui.com/draggable/#constrain-movement

mahdi.iqu

شنبه 16 آذر 1392, 01:35 صبح

منون دوست عزیز
داخل نمونه ای که قرار دادید یک اشکالی که وجود داره این هست که اشیا روی هم میفتند!
اگر بتونید چیزی مثل پنل هاست Cpanel معرفی کنید ممنون میشم

jalil_gh

شنبه 16 آذر 1392, 10:38 صبح

فکر کنم چیزی که شما میخایید رو بشه با متد sortable در jQuery UI (http://jqueryui.com/sortable/#default) انجام داد.

mahdi.iqu

شنبه 16 آذر 1392, 14:13 عصر

فکر کنم چیزی که شما میخایید رو بشه با متد sortable در jQuery UI (http://jqueryui.com/sortable/#default) انجام داد.
ممنون میشم نمونه ای قرار بدید

mahdi.iqu

شنبه 16 آذر 1392, 21:39 عصر

دوستان کاردان لطفا راهنمایی کنند :(
:)

Javidhb

یک شنبه 17 آذر 1392, 00:23 صبح

دمو (http://jsfiddle.net/sP3UZ/2803/) (با کمی تغییر از اینجا (http://stackoverflow.com/questions/2544143/how-to-horizontally-sort-divs-using-sortable-in-jquery))

mahdi.iqu

جمعه 22 آذر 1392, 00:47 صبح

دمو (http://jsfiddle.net/sP3UZ/2803/) (با کمی تغییر از اینجا (http://stackoverflow.com/questions/2544143/how-to-horizontally-sort-divs-using-sortable-in-jquery))
عذر خواهی بابت تاخیر در پاسخگویی
میشه این کد رو طوری تغیر داد که تنها بشه در محورد Y اشیا رو تغیر داد؟

mahdi.iqu

شنبه 23 آذر 1392, 02:24 صبح

دوستان کسی نیست کمک کنه؟

Javidhb

شنبه 23 آذر 1392, 13:36 عصر

$( ".selector" ).sortable({ axis: "x" });
منبع (http://api.jqueryui.com/sortable/#option-axis)

دمـــو (http://jsfiddle.net/sP3UZ/2814/)

mahdi.iqu

جمعه 27 دی 1392, 23:43 عصر

دمو (http://jsfiddle.net/sP3UZ/2803/) (با کمی تغییر از اینجا (http://stackoverflow.com/questions/2544143/how-to-horizontally-sort-divs-using-sortable-in-jquery))
اقا الان من این رو چطوری میتونم به کار ببرم؟
شما میتونید این رو در قالب یک فایل html برای من قرار بدید؟

mahdi.iqu

دوشنبه 30 دی 1392, 21:34 عصر

دوستان کمک نمی کنند؟

azamicu

پنج شنبه 03 بهمن 1392, 19:25 عصر

سلام دوست عزیز
از prepend , after , before , ... استفاده بکن

mahdi.iqu

سه شنبه 08 بهمن 1392, 15:56 عصر

عذر خواهی بابت تاخیر در پاسخگویی
میشه این کد رو طوری تغیر داد که تنها بشه در محورد Y اشیا رو تغیر داد؟
دوست عزیز میشه این رو در قالب یک فایل HTML به من بدید؟
فکر کنم باید یه فایل جی کوئری رو از جایی بخونه و من نمیدونم چطوری هست

سلام دوست عزیز
از prepend , after , before , ... استفاده بکن
از Css !؟ مگه میشه؟نمونه آنلاین وجود داره؟

mahdi.iqu

پنج شنبه 10 بهمن 1392, 09:57 صبح

دوستان کار بلد لطفا کمک کنید کارم بدجور گیره :(

mahdi.iqu

سه شنبه 15 بهمن 1392, 16:49 عصر

دوستان واقعا چیز سختی هست؟
دوستی در این لینک (http://jsfiddle.net/sP3UZ/2814/) دموی آنلاین این حرکت و برای من قرار دادند،حالا من اومدم تو یه فایل Html ازش استفاده کنم نتونستم فکر کنم باید یه فایل جی کوئری رو لود کنم اما نمیدونم چه فایلی!
ممنون میشم کمک کنید

mahdi.iqu

جمعه 25 بهمن 1392, 04:10 صبح

دوستان
@Javidhb
و...
لطفا کمک کنید!!!

Javidhb

یک شنبه 27 بهمن 1392, 17:57 عصر

توی این یک ماه شما میتونستید، جاوااسکریپت رو یاد بگیرید (یا توی 1 ساعت با یه مطالعه ساده جواب سوالتون رو بگیرید)

لینک فایلهای css و کتابخونه ها رو میتونید با آدرس فایلهای سرور خودتون عوض کنید.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>-----------</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
#draggable1 { width: 150px; height: 35px; padding: 0.5em; }
#draggable2 { width: 150px; height: 35px; padding: 0.5em; }
#draggable3 { width: 150px; height: 35px; padding: 0.5em; }
#sortable { width: 700px; height: 35px; padding: 0.5em; }
#sortable > div { float: left; background-color: red; cursor: pointer; margin: 5px;}
</style>

</head>
<body>

<div class="demo">
<div id="sortable" class="ui-state-default">
<div id = "draggable1" class="ui-state-default">Home</div>
<div id = "draggable2" class="ui-state-default">Contact Us</div>
<div id = "draggable3" class="ui-state-default">FAQs</div>
</div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$("#sortable").sortable({
revert: true
});
</script>
</body>
</html>