آموزش jQuery UI قسمت دوم کار با Draggable
0 0

آموزش jQuery UI قسمت دوم کار با Draggable


آموزش jQuery UI قسمت دوم کار با Draggable

در این پست نحوه استفاده از draggable در jQuery UI را توضیح می دهیم.

در پست های قبلی نحوه نصب jQuery UI و همچنین نحوه نمایش پیغام با استفاده jQuery UI را توضیح دادیم.

Draggable چیست؟

در jQuery UI تابع ای به نام Draggable داریم که امکان درگ کردن عناصر را امکان پذیر می کند.

در مثال زیر یک تگ div در صفحه قرار دادیم و id آن را برابر draggable قرار دادیم و سپس توسط تابع draggable() امکان درگ کردن را به تگ div اعمال کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#draggable").draggable();
        });
    </script>
    <style type="text/css">
        #draggable {
            background-color: bisque;
            height: 150px;
            width: 150px;
        }
    </style>
</head>
<body>
    <div id="draggable">
        www.iranganj.ir
    </div>
</body>
</html>

مثال های دیگر از Draggable

در مثال زیر خصوصیات دیگر Draggable را مورد بررسی قرار می دهیم.

Disabled : با استفاده از این گزینه می توان Draggable را غیر فعال کرد

Distance : با استفاده از این گزینه می توان  در صورتی که عمل درگ کردن بیش از 50px بود انجام شود

Delay : با استفاده از این گزنیه عمل درگ هر 500 میلی ثانیه انجام می شود

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#draggable1 span").draggable(
                { disabled: true });
            $("#draggable2 span").draggable(
                { distance: 50 });
            $("#draggable3 span").draggable(
                { delay: 500 });
        });
    </script>
    <style type="text/css">
        div {
            background-color: bisque;
            height: 150px;
            width: 150px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div id="draggable1">
        <span>www.iranganj.ir... You cant move me!</span>
    </div>
    <div id="draggable2">
        <span>www.iranganj.ir... Dragging will start only after you drag me for 50px</span>
    </div>
    <div id="draggable3">
        <span>www.iranganj.ir... You Have to wait for 500ms for dragging to start!</span>
    </div>
</body>
</html>

مثال های کاربردی دیگر از Draggable

Containment : با استفاده از این گزینه محدوده درگ کردن را مشخص می کنیم. در این مثال عمل درگ کردن در داخل تگ divی که id آن draggable1 است انجام می شود.

Axis : با استفاده از این گزینه می توانیم مشخص کنیم که عمل درگ در محدوده محور x ها یا y ها باشد.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#draggable1 span").draggable(
            {
                containment: "#draggable1"
            });
            $("#draggable2 span").draggable(
            {
                containment: "#draggable2",
                axis: "x"
            });
        });
    </script>
    <style type="text/css">
        #draggable1 {
            background-color: bisque;
            height: 150px;
            width: 400px;
        }

        #draggable2 {
            background-color: aqua;
            height: 150px;
            width: 400px;
        }
    </style>
</head>
<body>
    <div id="draggable1">
        <span>www.iranganj.ir</span>
    </div>
    <div id="draggable2">
        <span>www.iranganj.ir</span>
    </div>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب JqueryUI
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۳۱ خرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم