آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

متد droppable

دوره های مرتبط با این مقاله

JqueryUI - Droppable

jQueryUI متد droppable() را برای ساخت هر گونه عنصر DOM از نوع droppable در یک هدف تعیین شده، ارائه می دهد.


ترکیب

متد droppable() به دو روش مورد استفاده قرار می گیرد:


$(selector, context).droppable (options) Method

$(selector, context).droppable ("action", params)

متد $(selector, context).droppable (options)

متد droppable (options) بیان می کند که یک عنصر HTML می تواند به عنوان عنصری مورد استفاده قرار بگیرد که می توانید در آن عناصر دیگری قرار دهید. پارامتر options آبجکتی است که رفتار عناصر شامل را تعیین می کند.


ترکیب

$(selector, context).droppable (options);

می توانید با استفاده از آبجکت Javascript ، یک یا چند گزینه هم زمان ارائه دهید. اگر بیشتر از یک گزینه برای ارائه وجود داشته باشد، می توانید با استفاده از ویرگور آنها را از یکدیگر مجزا کنید، مانند ترکیب زیر:


$(selector, context).droppable({option1: value1, option2: value2..... });

جدول زیر گزینه های مختلفی را ارائه می دهد که با این متد مورد استفاده قرار می گیرند:


Option
Description
accept
این گزینه زمانی استفاده می شود که لازم است عنصرهای جابجایی را که قرار است برای دراپ کردن پذیرفته شوند، کنترل می کند. مقدار آن به طور پیش فرض * می باشد.
activeClass
این گزینه یک String می باشد که یک یا چند گروه CSS را نماش می دهد که هنگام جابجایی یک عنصر پذیرفته شده، به عنصر droppable اضافه می شوند. مقدار پیش فرض آن false می باشد.
addClasses
وقتی این گزینه روی false تنظیم شده باشد، از اضافه شدن گروه ui-droppable به عناصر droppable جلوگیری می کند. مقدار پیش فرض آن true می باشد.
disabled
وقتی این گزینه روی true تنظیم شده باشد،قابلیت دراپ شدن (droppable) را غیرفعال خواهد کرد. مقدار پیش فرض آن false می باشد.
greedy
این گزینه زمانی استفاده می شود که لازم است عناصر قابل جابه جایی را کنترل کنید که قرار است برای قرار گرفتن در droppable های تو در تو پذیرفته شوند. مقدار پیش فرض آن false می باشد. اگر این گزینه روی true تنظیم شده باشد، هر منبعی از droppable عنصر را دریافت نخواهد کرد.
hoverClass
این گزینه یک String می باشد که یک یا چند گروه CSS را نمایش می دهد که به عنصر droppable اضافه می شوند و یک عنصر پذیرفته شده وارد آن می شود. مقدار پیش فرض آن false می باشد.
scope
این گزینه برای محدود کردن عمل droppable از عناصر قابل جابه جایی فقط برای آیتم هایی که دارای options.scope مشابه هستند، استفاده می شود. مقدار پیش فرض آن "default" می باشد.
tolerance
این گزینه یک String می باشد که تعیین می کند کدام وضعیت برای امتحان کردن اینکه آیا یک draggable روی یک droppable معلق است، استفاده شود. مقدار پیش فرض آن "intersect" می باشد.

بخش زیر چند مثال کاربردی از قابلیت دراپ کردن نشان خواهد داد.


قابلیت پیش فرض

مثال زیر یک قابلیت ساده ی droppable را توضیح می دهد که هیچ پارامتری به droppable() انتقال نمی دهد.


<’;!doctype html>
<’;html lang="en">
<’;head>
<’;meta charset="utf-8" />

<’;title>jQuery UI Droppable - Default functionality<’; />title>
<’;link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

<’;script src="http://code.jquery.com/jquery-1.10.2.js"><’; />script>
<’;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"><’; />script>
<’;style>
        #draggable-1 {
            width: 100px;
            height: 50px;
            padding: 0.5em;
            float: left;
            margin: 22px 5px 10px 0;
        }
 
        #droppable-1 {
            width: 120px;
            height: 90px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
<’; />style>
<’;script>
        $(function () {
            $("#draggable-1").draggable();
            $("#droppable-1").droppable();
        });
<’; />script>
<’; />head>
<’;body>
<’;div id="draggable-1" class="ui-widget-content">
<’;p>Drag me to my target<’; />p>
<’; />div>
<’;div id="droppable-1" class="ui-widget-header">
<’;p>Drop here<’; />p>
<’; />div>
<’; />body>
<’; />html>

استفاده از addClass، disabled و tolerance

مثال زیر استفاده از سه گزینه ی (a) addClass (b) disabled و (c) tolerance را عملکرد دراپ کردن JqueryUI نشان می دهد.








jQuery UI Droppable - Default functionality








Drag me to my target

Drop here

I'm disabled, you can't drop here!

Tolerance Touch!

Tolerance Fit!


اکنون عنصر را روی باکس "Tolerance Touch!" قرار دهید ( فقط در کناره ی باکس حرکت کنید) و تغییرات عنصر هدف را مشاهده کنید. اکنون برای قرار دادن عنصر روی هدف "Tolerance Fit!"، عنصر قابل جابجایی باید به طور کامل عنصر هدف را تحت پوشش قرار دهد، به عنوان مثال "Tolerance Fit!".
عناصر را انتخاب کنید تا دراپ شوند:
مثال زیر استفاده از گزینه های accept و scope را در عملکرد درگ کردن JqueryUI نشان می دهد.








jQuery UI Droppable - Default functionality








People to be dropped to Japan

People to be dropped to India

Japan

India


People who want to learn Java

People who want to learn Spring

Java

Spring


در اینجا مشاهده می کنید که می توانید عنصر "People from Japan" را فقط روی هدف "Japan" و عنصر "People from India" را روی هدف India قرار دهید. به طور مشابه محدوده ی مربوط به "People who want to learn Java" روی هدف Java" و "People who want to learn Spring" روی هدف "Spring target" تنظیم می شود.


مدیریت ظاهر

مثال زیر استفاده از گزینه های activeClass و hoverClass از گروه JqueryUI را توضیح می دهد، که در تنظیم ظاهر به ما کمک می کند.








jQuery UI Droppable - Default functionality








 

Drag me to my target

Drop here


شما متوجه می شوید که در جابه جایی و یا تعلیق عنصر "Drag me to my target" رنگ عنصر "Drop here" را تغییر می دهد.


متد $(selector, context).droppable ("action", params)

متد droppable ("action", params) می تواند عملی را روی عناصر droppable اجرا کند، مانند جلوگیری از قابلیت droppable. این عمل به عنوان یک رشته در اولین برهان تعیین شده است ( به عنوان مثال "disable" مانع دراپ شدن می شود.). در جدول زیر فعالیت هایی که منتقل می شوند را چک کنید.


ترکیب

$(selector, context).droppable ("action", params);

جدول زیر فعالیت های مختلفی را لیست می کند که در با این متد مورد استفاده قرار می گیرند:


Action
Description
destroy
این عملکرد قابلیت droppable مربوط به یک عنصر را کاملا از بین می برد. این عناصر به .ضعیت pre-init خود باز می گردند.
disable
این عملیات droppable را لغو می کند. عناصر دیگر عناصر droppable نیستند. این متد هیچ برهانی نمی پذیرد.
enable
این عملیات مجددا عملکرد droppable را فعال سازی می کند و عناصر مجددا می توانند عنصر droppable دریافت کنند. این متد هیچ برهانی را نمی پذیرد.
option
این فعالیت یک آبجکت حاوی جفت های key/valu را دریافت می کند که نشان دهنده ی گزینه های hash فعلی دارای قابلیت droppable می باشد. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این فعالیت مقداری که معمولا عنصر droppable را با optionName تعیین شده مرتبط می سازد، دریافت می کند و مقدارString را به عنوان یک برهان می گیرد.
option( optionName, value )
این فعالیت مقدار گزینه ی droppable مرتبط با optionName تعیین شده را تنظیم می کند.
option( options )
این عمل یک یا چند گزینه برای droppable تنظیم می کند. گزینه های برهان نقشه ای از جفت های option-value می باشد که باید تنظیم شوند.
widget
این عمل یک آبجکت jQuery حاوی عنصر droppable یازمی گرداند. این متد هیچ برهانی را نمی پذیرد.
مثال:

اکنون اجازه بدهید با استفاده از عملکردهای ارائه شده در جدول بالا، مثالی را به شما توضیح دهیم. مثال زیر استفاده از متد destroy() را توضیح می دهد.








jQuery UI Droppable - Default functionality








drag 1

drag 2

drag 3

drop here
drop here
drop here

اگر "drag1" را روی ر کدام از عناصر به نام "drop here" قرار دهید، متوجه خواهید شد که این عنصر دراپ شده و این عمل قابلیت یک عنصر را به طور کامل از بین می برد. شما می توانید "drag2" و "drag3" را مجددا روی این عنصر قرار دهید.


مدیریت رویداد روی عناصر droppable

علاوه بر متد droppable (options) که در بخش قبل مشاهده کردیم، JqueryUI متدهای رویدادی ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدها در جدول زیر لیست شده اند:


Event Method
Description
activate(event, ui)
این رویداد وقتی آغاز می شود که عنصر قابل جابه جایی پذیرفته شده جابه جایی را شروع کند. اگر بخواهید droppable را دارای ویژگی light up کنید، این متد می تواند مفید باشد.
create(event, ui)
این رویداد وقتی آغاز می شود که یک عنصر droppable ایجاد شده باشد، که رویداد از نوع Event است و ui از نوع object.
deactivate(event, ui)
این رویداد وقتی آغاز می شود که یک عنصر قابل جابه جایی، جابه جایی را متوقف کند که رویداد از نوع Event است و ui از نوع object.
drop(event, ui)
این عمل وقتی آغاز می شود که یک المنت روی droppable دراپ شود که براساس گزینه ی thetolerance می باشد که رویداد از نوع Event است و ui از نوع object.
out(event, ui)
این رویداد وقتی آغاز می شود که یک المنت قابل جابه جایی پذیرفته شده از droppable خارج شود و براساس گزینه ی tolerance می باشد و رویداد از نوع Event است و ui از نوع object
over(event, ui)
این رویداد وقتی آغاز می شود که یک عنصر قابل جابه جایی پذیرفته شده روی droppable درگ می شود. این متد براساس گزینه ی tolerance می باشد و رویداد از نوع Event است و ui از نوع object
مثال:

مثال زیر استفاده از متد event را در هنگام عملکرد دراپ توضیح می دهد. این مثال استفاده از رویدادهای drop، over و out را توضیح می دهد.








jQuery UI Droppable - Default functionality








Drag me to my target

Drop here


در اینجا متوجه خواهید شد که هنگامی که عنصر را درگ می کنید، چگونه پیغام در یک عنصر droppable تغییر می کند.

  • 1692
  •    802
  • تاریخ ارسال :   1394/07/28

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .