مسج واجهة المستخدم سبيل المثال - مكان (Droppable)
الحاجيات التي يمكن أن ننجر وراء إنشاء هذا الهدف.
لمزيد من التفاصيل حول التفاعل droppable، راجع وثائق API يمكن وضع أجزاء صغيرة (Droppable على القطعة) .
وظيفة الافتراضي
تمكين وظيفة droppable على أي عنصر DOM، ويمكن سحب الحاجيات لإنشاء الهدف.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج مكان واجهة المستخدم (Droppable) - وظيفة الافتراضي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#draggable {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px 10px 10px 0؛}
#droppable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#draggable") .draggable ()؛
$ ( "#droppable") .droppable ({
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "ع")
هتمل ( "انخفض!")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> الرجاء ارسال لي جره إلى مكان الهدف! </ P>
</ div>
<شعبة معرف = "droppable" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> حافظ على الخروج من هنا! </ P>
</ div>
</ الجسم>
</ HTML>
قبلت
استخدام accept خيارات استهداف عنصر droppable الذي يقبل (أو مجموعة من العناصر).
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج مكان واجهة المستخدم (Droppable) - قبلت </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#droppable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px؛}
#draggable، # القابل للسحب-nonvalid {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 10px 10px 10px 0؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#draggable، # القابل للسحب-nonvalid") .draggable ()؛
$ ( "#droppable") .droppable ({
نقبل: "#draggable"
activeClass: "واجهة المستخدم للدولة، تحوم"
hoverClass: "واجهة المستخدم للدولة نشطة"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "ع")
هتمل ( "انخفض!")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "القابل للسحب-nonvalid" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> لا أستطيع وضعها القابل للسحب </ P>
</ div>
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> الرجاء سحب لي إلى الوجهة </ P>
</ div>
<شعبة معرف = "droppable" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> نقبل: "#draggable '</ P>
</ div>
</ الجسم>
</ HTML>
منع انتشار
عند استخدام droppable متداخلة - على سبيل المثال، يمكن أن يكون هناك بنية الدليل شجرة للتحرير مع المجلدات والعقد وثيقة - greedy تم تعيين الخيار إلى true عندما يكون قابل للسحب للحيلولة دون وضعه على العقد التابعة (droppable) عندما نشر الحدث.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج مكان واجهة المستخدم (Droppable) - منع انتشار </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#draggable {العرض: 100px؛ الطول: 40px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px 10px 10px 0؛}
#droppable، # droppable2 {العرض: 230px؛ الطول: 120px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px؛}
# Droppable-الداخلية، # droppable2-الداخلي {العرض: 170px؛ الطول: 60px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 10px؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#draggable") .draggable ()؛
$ ( "#droppable، # Droppable-الداخلية") .droppable ({
activeClass: "واجهة المستخدم للدولة، تحوم"
hoverClass: "واجهة المستخدم للدولة نشطة"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "> ع")
هتمل ( "انخفض!")؛
عودة كاذبة.
}
})؛
$ ( "# Droppable2، # droppable2-الداخلية") .droppable ({
الجشع: صحيح،
activeClass: "واجهة المستخدم للدولة، تحوم"
hoverClass: "واجهة المستخدم للدولة نشطة"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "> ع")
هتمل ( "انخفض!")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> الرجاء سحب لي إلى الوجهة </ P>
</ div>
<شعبة معرف = "droppable" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> droppable الخارجي </ P>
<شعبة معرف = "droppable-الداخلية" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> droppable الداخلية (بدون الجشع) </ P>
</ div>
</ div>
<شعبة معرف = "droppable2" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> droppable الخارجي </ P>
<شعبة معرف = "droppable2 الداخلية" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> droppable الداخلي (مع الجشع) </ P>
</ div>
</ div>
</ الجسم>
</ HTML>
استعادة موقع القابل للسحب
كما هو الحال مع القيم المنطقية revert عندما الخيار القابل للسحب لوقف سحب، والعودة القابل للسحب (أو مساعده) إلى الموقع الأصلي.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مكان (Droppable) - خفض موقف قابل للسحب </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#draggable، # draggable2 {العرض: 100px؛ الطول: 100px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 10px 10px 10px 0؛}
#droppable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#draggable") .draggable ({العودة: "صالح"})؛
$ ( "# Draggable2") .draggable ({العودة: "باطل"})؛
$ ( "#droppable") .droppable ({
activeClass: "واجهة المستخدم للدولة الافتراضي"،
hoverClass: "واجهة المستخدم للدولة، تحوم"
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "ع")
هتمل ( "وضعت!")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> تخفيض عند وضعها على الهدف </ P>
</ div>
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> وعندما لا يتم وضع الحد على الهدف </ P>
</ div>
<شعبة معرف = "droppable" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> الرجاء وضع هنا </ P>
</ div>
</ الجسم>
</ HTML>
سلة التسوق عرض
يوضح كيفية استخدام لوحة قابلة للطي لعرض بنية الدليل المنتج، استخدم السحب والإفلات لإضافة المنتجات إلى عربة التسوق والمنتجات عربة التسوق هي للفرز.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مكان مسج واجهة المستخدم (Droppable) - سلة التسوق تجريبي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
H1 {الحشو: .2em؛ هامش: 0؛}
#products {تعويم: الأيسر، العرض: 500px؛ الهامش اليمين: 2em؛}
#cart {العرض: 200px؛ تعويم: غادر؛ هامش قمة: 1em؛}
/ * تحديد قائمة من الأساليب لتعظيم * droppable /
#cart رأ {هامش: 0؛ الحشو: 1em 0 1em 3em؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#catalog") .accordion ()؛
$ ( "#catalog لي") .draggable ({
appendTo: "الهيئة"،
المساعد: "استنساخ"
})؛
$ ( "را #cart") .droppable ({
activeClass: "واجهة المستخدم للدولة الافتراضي"،
hoverClass: "واجهة المستخدم للدولة، تحوم"
نقبل: ": لا (.ui-للفرز المساعد)"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا) .find ( ".placeholder"). إزالة ()؛
$ ( "<لي> </ لى>") .text (ui.draggable.text ()) .appendTo (هذا)؛
}
}). قابل للفرز ({
العناصر: "لي: لا (.placeholder)"،
النوع: وظيفة () {
// الحصول على droppable التفاعل مع دخول أضاف للفرز // استخدام connectWithSortable يمكن حل هذه المشكلة، ولكن لا يسمح لك لتخصيص النشط / hoverClass خيار $ (هذا) .removeClass ( "واجهة المستخدم للدولة الافتراضي")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<معرف = "منتجات" div>
<H1 الطبقة = "واجهة المستخدم القطعة-رأس"> المنتجات </ H1>
<شعبة معرف = "الكتالوج">
<H2> <a href="#"> تي شيرت </A> </ H2>
<div>
<UL>
<لي> قميص Lolcat </ لى>
<لي> Cheezeburger قميص </ لى>
<لي> Buckit قميص </ لى>
</ UL>
</ div>
<H2> حقائب <a href="#"> </A> </ H2>
<div>
<UL>
<لي> حمار وحشي مخطط </ لى>
<لي> جلد أسود </ لى>
<لي> التمساح جلد </ لى>
</ UL>
</ div>
<H2> <a href="#"> الأدوات </A> </ H2>
<div>
<UL>
<لي> آي فون </ لى>
<لي> بود </ لى>
<لي> باد </ لى>
</ UL>
</ div>
</ div>
</ div>
<شعبة معرف = "عربة">
<H1 الطبقة = "واجهة المستخدم القطعة-رأس"> عربة </ H1>
<فئة الدرجة = "واجهة المستخدم القطعة المحتوى">
<رأ>
<الطبقة = "نائبا" لي> إضافة منتجات هنا </ لى>
</ رأ>
</ div>
</ div>
</ الجسم>
</ HTML>
بسيط مدير الصور
يمكنك سحب وإسقاط الصور إلى سلة المحذوفات أو انقر على رمز سلة المهملات لحذف الصور.
يمكنك سحب وإسقاط الصور في ألبومات أو انقر فوق رمز إعادة التدوير لاستعادة الصور.
يمكنك التكبير عن طريق النقر على أيقونة لعرض صورة أكبر. مسج واجهة المستخدم الحوار (الحوار) يعني لإطار مشروط.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مكان (Droppable) - إدارة الصور بسيط </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#gallery {تعويم: الأيسر، العرض: 65٪، مين الطول: 12em؛}
النشطة .gallery.custom للدولة-{خلفية: #eee؛}
.gallery لى {تعويم: غادر؛ العرض: 96px؛ الحشو: 0.4em؛ الهامش: 0 0.4em 0.4em 0؛ مواءمة النصوص: مركز؛}
.gallery لى H5 {هامش: 0 0 0.4em؛ المؤشر: الخطوة؛}
.gallery لى {تعويم: الحق؛}
.gallery لى a.ui-رمز-zoomin {تعويم: غادر؛}
.gallery لى IMG {عرض: 100٪؛ المؤشر: الخطوة؛}
#trash {تعويم: الصحيح، العرض: 32٪، مين الطول: 18em؛ الحشو: 1٪؛}
H4 #trash {خط الطول: 16px؛ هامش: 0 0 0.4em؛}
#trash H4 .ui-رمز {تعويم: غادر؛}
#trash .gallery H5 {عرض: لا شيء؛}
</ النمط>
<script>
$ (وظيفة () {
// هذا هو الألبوم والقمامة فار $ معرض = $ ( "#gallery")،
$ المهملات = $ ( "#trash")؛
// جعل دخول ألبوم القابل للسحب $ ( "لي"، $ معرض) .draggable ({
إلغاء: "a.ui-رمز"، // انقر على أيقونة لا يبدأ سحب العودة: "باطل"، // عندما unplaced، فإن دخول ستعود إلى احتواء الموقف الأصلي: "وثيقة"،
المساعد: "استنساخ"،
المؤشر: "تحرك"
})؛
// دع يمكن وضعها في سلة المهملات، قبلت trash.droppable دخول الألبوم $ ({
نقبل: "#gallery> لي"،
activeClass: "واجهة المستخدم للدولة-تسليط الضوء"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
deleteImage (ui.draggable)؛
}
})؛
// جعل يمكن وضعها في ألبوم، قبلت سلة المحذوفات دخول $ gallery.droppable ({
نقبل: "لي #trash"
activeClass: "المخصصة للدولة نشطة"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
recycleImage (ui.draggable)؛
}
})؛
// صورة حذف وظيفة فار recycle_icon = "<لأ href =" رابط / إلى / إعادة تدوير / النصي / عندما / نحن / لديها / شبيبة / إيقاف "عنوان =" صورة استعادة "الطبقة =" واجهة المستخدم، واجهة المستخدم رمز-رمز-التحديث " > استعادة صورة </A> ".
deleteImage وظيفة ($ البند) {
$ Item.fadeOut (وظيفة () {
فار $ قائمة = $ ( "المجاهدين"، $ القمامة) مدة العرض؟
$ ( "ماي"، $ القمامة):
$ ( "<UL الطبقة = 'معرض واجهة المستخدم المساعد إعادة تعيين" /> ") .appendTo ($ القمامة)؛
$ Item.find ( "a.ui أيقونة القمامة"). إزالة ()؛
$ Item.append (recycle_icon) .appendTo ($ القائمة) .fadeIn (وظيفة () {
$ البند
.animate ({عرض: "48px"})
.find ( "IMG")
.animate ({الطول: "36px"})؛
})؛
})؛
}
// صورة استعادة فار trash_icon = "<لأ href =" رابط / إلى / القمامة / النصي / عندما / نحن / لديها / شبيبة / إيقاف "عنوان =" إزالة صورة "الطبقة =" واجهة المستخدم، واجهة المستخدم رمز أيقونة القمامة " > حذف صورة </A> ".
recycleImage وظيفة ($ البند) {
$ Item.fadeOut (وظيفة () {
$ البند
.find ( "a.ui-رمز-التحديث")
أزل ()
.end ()
. المغلق ( "العرض"، "96px")
.append (trash_icon)
.find ( "IMG")
. المغلق ( "ارتفاع"، "72px")
.end ()
.appendTo ($ معرض)
.fadeIn ()؛
})؛
}
// صورة ميزة معاينة، ديموس ui.dialog تستخدم viewLargerImage الوسائط وظيفة نافذة ($ الارتباط) {
فار SRC = $ link.attr ( "أ href")،
عنوان = $ link.siblings ( "IMG") .attr ( "البديل")،
$ مشروط = $ ( "IMG [SRC $ =" + SRC + " ']")؛
إذا ($ modal.length) {
$ Modal.dialog ( "فتح")؛
} {شيء آخر
فار IMG = $ ( "<IMG بديل =" + عنوان + " '= العرض' 384 'ارتفاع =' 288 'أسلوب =' عرض: لا شيء؛ الحشو: 8px؛" /> ")
.attr ( "SRC" SRC) .appendTo ( "الهيئة")؛
setTimeout (وظيفة () {
img.dialog ({
العنوان: العنوان،
عرض: 400،
مشروط: صحيح
})؛
}، 1)؛
}
}
// وكيل رمز حل السلوك $ ( "ul.gallery> لي") من خلال هذا الحدث. انقر (وظيفة (الحدث) {
فار $ البند = $ (هذا)،
$ الهدف = $ (event.target)؛
إذا ($ target.is ( "a.ui أيقونة القمامة")) {
deleteImage ($ البند)؛
} آخر إذا ($ target.is ( "a.ui-رمز-zoomin")) {
viewLargerImage ($ الهدف)؛
} آخر إذا ($ target.is ( "a.ui-رمز-التحديث")) {
recycleImage ($ البند)؛
}
عودة كاذبة.
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم، واجهة المستخدم القطعة المساعد-clearfix">
<UL معرف = "معرض" الطبقة = "معرض واجهة المستخدم المساعد-إعادة تعيين واجهة المستخدم المساعد-clearfix">
<الدرجة لي = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية-آر">
<H5 الطبقة = "واجهة المستخدم القطعة-رأس"> جبال تاترا العالية </ H5>
على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / high_tatras_min.jpg" بديل = "جبال تاترا العالية الذروة" العرض = "96" ارتفاع = "72">
<a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> عرض أكبر </A>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> حذف الصور </A>
</ لى>
<الدرجة لي = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية-آر">
<H5 الطبقة = "واجهة المستخدم القطعة-رأس"> جبال تاترا العالية 2 </ H5>
على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / high_tatras2_min.jpg" بديل = "الجبل الأخضر بحيرة المقصورة" العرض = "96" ارتفاع = "72">
<a href="../wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> عرض أكبر </A>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> حذف الصور </A>
</ لى>
<الدرجة لي = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية-آر">
<H5 الطبقة = "واجهة المستخدم القطعة-رأس"> جبال تاترا العالية 3 </ H5>
على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / high_tatras3_min.jpg" بديل = "خطة تسلق" العرض = "96" ارتفاع = "72">
<a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> عرض أكبر </A>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> حذف الصور </A>
</ لى>
<الدرجة لي = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية-آر">
<H5 الطبقة = "واجهة المستخدم القطعة-رأس"> جبال تاترا العالية 4 </ H5>
على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / high_tatras4_min.jpg" بديل = "في الجزء العلوي من كوزي kopka" العرض = "96" ارتفاع = "72">
<a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> عرض أكبر </A>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> حذف الصور </A>
</ لى>
</ UL>
<شعبة معرف = "القمامة" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم للدولة الافتراضي">
<الطبقة H4 = "واجهة المستخدم القطعة-رأس"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة القمامة"> المهملات </ SPAN> المهملات </ H4>
</ div>
</ div>
</ الجسم>
</ HTML>
ردود الفعل البصري
عندما تحوم فوق droppable، أو عندما droppable تنشيط (أي، يتم وضع قابل للسحب مقبول على droppable) عند تغيير مظهر droppable. استخدام hoverClass أو activeClass الخيار لتحديد فئة، على التوالي.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج مكان واجهة المستخدم (Droppable) - ملاحظات مرئية </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
#draggable، # draggable2 {العرض: 90px؛ الطول: 90px؛ الحشو: 0.5em، تعويم: غادر؛ هامش: 10px 10px 10px 0؛}
#droppable، # droppable2 {العرض: 120px؛ الطول: 120px؛ الحشو: 0.5em، تعويم: الأيسر. هامش: 10px؛}
H3 {واضح: غادر؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#draggable") .draggable ()؛
$ ( "#droppable") .droppable ({
hoverClass: "واجهة المستخدم للدولة، تحوم"
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "ع")
هتمل ( "انخفض!")؛
}
})؛
$ ( "# Draggable2") .draggable ()؛
$ ( "# Droppable2") .droppable ({
نقبل: "# draggable2"
activeClass: "واجهة المستخدم للدولة الافتراضي"،
قطرة: وظيفة (الحدث، واجهة المستخدم) {
$ (هذا)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")
.find ( "ع")
هتمل ( "انخفض!")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<H3> عندما تحوم فوق droppable عندما ردود الفعل: </ H3>
<شعبة معرف = "القابلة للسحب" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> الرجاء سحب لي إلى الوجهة </ P>
</ div>
<شعبة معرف = "droppable" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> الرجاء وضع هنا </ P>
</ div>
<H3> عند تفعيلها ردود الفعل القابل للسحب: </ H3>
<شعبة معرف = "draggable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
<P> الرجاء سحب لي إلى الوجهة </ P>
</ div>
<شعبة معرف = "droppable2" الطبقة = "واجهة المستخدم القطعة-رأس">
<P> الرجاء وضع هنا </ P>
</ div>
</ الجسم>
</ HTML>