متد droppable

سلام دوستان عزیز حالتون که خوبه ؟با اموزش امروزککه درزمینه jquery با شما دوستان عزیز همارههستیم. در این بخش به متد ها میپردازیم.
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() انتقال نمی دهد.

jQuery UI Droppable – Default functionality

#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;

}

$(function () {

$(“#draggable-1”).draggable();

$(“#droppable-1”).droppable();

});

Drag me to my target

Drop here

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

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

#draggable-2 {

width: 100px;

height: 50px;

padding: 0.5em;

margin: 0px 5px 10px 0;

}

#droppable-2, #droppable-3, #droppable-4, #droppable-5 {

width: 120px;

height: 90px;

padding: 0.5em;

float: left;

margin: 10px;

}

$(function () {

$(“#draggable-2”).draggable();

$(“#droppable-2”).droppable({

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

$(“#droppable-3”).droppable({

disabled: “true”,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

$(“#droppable-4”).droppable({

tolerance: ‘touch’,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped with a touch!”);

}

});

$(“#droppable-5”).droppable({

tolerance: ‘fit’,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped only when fully fit on the me!”);

}

});

});

اکنون عنصر را روی باکس “Tolerance Touch!” قرار دهید ( فقط در کناره ی باکس حرکت کنید) و تغییرات عنصر هدف را مشاهده کنید. اکنون برای قرار دادن عنصر روی هدف “Tolerance Fit!”، عنصر قابل جابجایی باید به طور کامل عنصر هدف را تحت پوشش قرار دهد، به عنوان مثال “Tolerance Fit!”.

عناصر را انتخاب کنید تا دراپ شوند:

مثال زیر استفاده از گزینه های accept و scope را در عملکرد درگ کردن JqueryUI نشان می دهد.

.wrap {

display: table-row-group;

}

#japanpeople, #indiapeople, #javatutorial, #springtutorial {

width: 120px;

height: 70px;

padding: 0.5em;

float: left;

margin: 0px 5px 10px 0;

}

#japan, #india, #java, #spring {

width: 140px;

height: 100px;

padding: 0.5em;

float: left;

margin: 10px;

}

$(function () {

$(“#japanpeople”).draggable();

$(“#indiapeople”).draggable();

$(“#japan”).droppable({

accept: “#japanpeople”,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

$(“#india”).droppable({

accept: “#indiapeople”,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

$(“#javatutorial”).draggable({ scope: “java” });

$(“#springtutorial”).draggable({ scope: “spring” });

$(“#java”).droppable({

scope: “java”,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

$(“#spring”).droppable({

scope: “spring”,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

});

---

در اینجا مشاهده می کنید که می توانید عنصر “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 را توضیح می دهد، که در تنظیم ظاهر به ما کمک می کند.

#draggable-3 {

width: 100px;

height: 50px;

padding: 0.5em;

float: left;

margin: 21px 5px 10px 0;

}

#droppable-6 {

width: 120px;

height: 90px;

padding: 0.5em;

float: left;

margin: 10px;

}

.active {

border-color: blue;

background: grey;

}

.hover {

border-color: red;

background: green;

}

$(function () {

$(“#draggable-3”).draggable();

$(“#droppable-6”).droppable({

activeClass: “active”,

hoverClass: “hover”,

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

}

});

});

شما متوجه می شوید که در جابه جایی و یا تعلیق عنصر “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() را توضیح می دهد.

.draggable-4 {

width: 90px;

height: 50px;

padding: 0.5em;

float: left;

margin: 0px 5px 10px 0;

border: 1px solid red;

background-color: #B9CD6D;

}

.droppable-7 {

width: 100px;

height: 90px;

padding: 0.5em;

float: left;

margin: 10px;

border: 1px solid black;

background-color: #A39480;

}

.droppable.active {

background-color: red;

}

$(function () {

$(‘.draggable-4’).draggable({ revert: true });

$(‘.droppable-7’).droppable({

hoverClass: ‘active’,

drop: function (e, ui) {

$(this).html(ui.draggable.remove().html());

$(this).droppable(‘destroy’);

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“i’m destroyed!”);

}

});

});

اگر “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 را توضیح می دهد.

#draggable-5 {

width: 100px;

height: 50px;

padding: 0.5em;

float: left;

margin: 22px 5px 10px 0;

}

#droppable-8 {

width: 120px;

height: 90px;

padding: 0.5em;

float: left;

margin: 10px;

}

$(function () {

$(“#draggable-5”).draggable();

$(“#droppable-8”).droppable({

drop: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“Dropped!”);

},

over: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“moving in!”);

},

out: function (event, ui) {

$(this)

.addClass(“ui-state-highlight”)

.find(“p”)

.html(“moving out!”);

}

});

});

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