ตัวอย่างเช่น jQuery UI - สถานที่ (droppable)

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - ลาก (ลาก)

ถัดไป: เช่น jQuery UI - ซูม (ปรับขนาดได้)

วิดเจ็ตที่สามารถลากเพื่อสร้างเป้าหมาย

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการมีปฏิสัมพันธ์ droppable, ดูเอกสาร API ชิ้นส่วนขนาดเล็กที่สามารถวาง (droppable Widget ที่)

ฟังก์ชั่นเริ่มต้น

การเปิดใช้งานฟังก์ชั่น droppable ในองค์ประกอบ DOM ใด ๆ และสามารถลากวิดเจ็ตที่จะสร้างเป้าหมาย

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI สถานที่ (droppable) - ฟังก์ชั่นเริ่มต้น </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px 10px 10px 0;}
  #droppable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "P")
            .html ( "ลดลง!");
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> กรุณาส่งฉันลากไปยังสถานที่เป้าหมาย! </ p>
</ div>
 
<div id = "droppable" class = "UI-Widget หัว">
  <p> เก็บให้พ้นจากที่นี่! </ p>
</ div>
 
 
</ body>
</ html>

ได้รับการยืนยัน

ใช้ accept เลือกการกำหนดเป้าหมายองค์ประกอบ droppable ที่รับ (หรือกลุ่มขององค์ประกอบ)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI สถานที่ (droppable) - ได้รับการยอมรับ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #droppable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px;}
  #draggable # draggable-nonvalid {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px 10px 10px 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable # ลาก-nonvalid") .draggable ();
    $ ( "#droppable") .droppable ({
      ยอมรับ "#draggable"
      activeClass: "UI รัฐ-hover"
      hoverClass: "UI ของรัฐที่ใช้งาน"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "P")
            .html ( "ลดลง!");
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ที่ลาก-nonvalid" class = "UI-Widget เนื้อหา">
  <p> ฉันไม่สามารถวางลากได้ </ p>
</ div>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> โปรดลากฉันไปยังปลายทาง </ p>
</ div>
 
<div id = "droppable" class = "UI-Widget หัว">
  <p> ยอมรับ '#draggable' </ p>
</ div>
 
 
</ body>
</ html>

ป้องกันไม่ให้เกิดการแพร่กระจาย

เมื่อใช้ droppable ซ้อนกัน - ตัวอย่างเช่นคุณสามารถมีโครงสร้างไดเรกทอรีต้นไม้ที่สามารถแก้ไขได้กับโฟลเดอร์เอกสารและโหนด - greedy ตั้งค่าตัวเลือกที่แท้จริงเมื่อลากไปมาได้เพื่อป้องกันไม่ให้ถูกวางไว้บนโหนดเด็ก (droppable) เมื่อ การขยายพันธุ์เหตุการณ์

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI สถานที่ (droppable) - ป้องกันไม่ให้เกิดการแพร่กระจาย </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable {กว้าง: 100px; ความสูง: 40px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px 10px 10px 0;}
  #droppable # droppable2 {กว้าง: 230px; ความสูง: 120px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px;}
  # droppable-ภายใน # droppable2-ภายใน {ความกว้าง: 170 พิกเซล; ความสูง: 60px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ();
 
    $ ( "#droppable # droppable-ภายใน") .droppable ({
      activeClass: "UI รัฐ-hover"
      hoverClass: "UI ของรัฐที่ใช้งาน"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "> P")
            .html ( "ลดลง!");
        กลับเท็จ;
      }
    });
 
    $ ( "# Droppable2 # droppable2-ภายใน") .droppable ({
      โลภ: จริง
      activeClass: "UI รัฐ-hover"
      hoverClass: "UI ของรัฐที่ใช้งาน"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "> P")
            .html ( "ลดลง!");
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> โปรดลากฉันไปยังปลายทาง </ p>
</ div>
 
<div id = "droppable" class = "UI-Widget หัว">
  <p> droppable ภายนอก </ p>
  <div id = "droppable-ภายใน" class = "UI-Widget หัว">
    <p> droppable ภายใน (ไม่โลภ) </ p>
  </ div>
</ div>
 
<div id = "droppable2" class = "UI-Widget หัว">
  <p> droppable ภายนอก </ p>
  <div id = "droppable2-ภายใน" class = "UI-Widget หัว">
    <p> droppable ภายใน (กับโลภ) </ p>
  </ div>
</ div>
 
 
</ body>
</ html>

เรียกคืนสถานที่ลาก

เช่นเดียวกับค่าบูลีน revert เมื่อตัวเลือกที่จะหยุดที่ลากลากกลับมาลากไปมาได้ (หรือผู้ช่วยของมัน) ไปยังตำแหน่งเดิม

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI เพลส (droppable) - การลดตำแหน่งที่ลาก </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 {กว้าง: 100px; ความสูง: 100px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px 10px 10px 0;}
  #droppable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ({ย้อนกลับ: "ถูกต้อง"});
    $ ( "# Draggable2") .draggable ({ย้อนกลับ: "ไม่ถูกต้อง"});
 
    $ ( "#droppable") .droppable ({
      activeClass: "UI-รัฐเริ่มต้น"
      hoverClass: "UI รัฐ-hover"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "P")
            .html ( "วางไว้!");
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> ลดลงเมื่อวางไว้ในเป้าหมาย </ p>
</ div>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> เมื่อลดไม่ได้วางอยู่บนเป้าหมาย </ p>
</ div>
 
<div id = "droppable" class = "UI-Widget หัว">
  <p> โปรดใส่ในที่นี่ </ p>
</ div>
 
 
</ body>
</ html>

ช้อปปิ้งการสาธิตรถเข็น

อธิบายวิธีการใช้แผงพับเพื่อแสดงโครงสร้างไดเรกทอรีผลิตภัณฑ์ใช้การลากและวางเพื่อเพิ่มสินค้าในตะกร้าช้อปปิ้งผลิตภัณฑ์รถเข็นที่มีการจัดเรียง

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> สถาน jQuery UI (droppable) - รถเข็นสาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  h1 {padding: .2em; margin: 0;}
  #products {ลอย: ด้านซ้าย; กว้าง: 500px; ขอบขวา: 2em;}
  #cart {กว้าง: 200px; ลอย: ด้านซ้าย; ขอบด้านบน: 1em;}
  / * กำหนดรายการของรูปแบบเพื่อเพิ่ม droppable * /
  #cart OL {margin: 0; padding: 0 1em 1em 3em;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#catalog") .accordion ();
    $ ( "#catalog ลี่") .draggable ({
      appendTo: "ร่างกาย"
      ผู้ช่วย "โคลน"
    });
    $ ( "#cart เฒ่า") .droppable ({
      activeClass: "UI-รัฐเริ่มต้น"
      hoverClass: "UI รัฐ-hover"
      ยอมรับ ": ไม่ได้ (.ui-จัดเรียงผู้ช่วย)"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้) ประจำวันหา ( ".placeholder") remove ();
        $ ( "<li> </ li>") .Text (ui.draggable.text ()) .appendTo (นี้);
      }
    }). จัดเรียง ({
      รายการ "หลี่: ไม่ได้ (.placeholder)"
      เรียงลำดับตาม: ฟังก์ชั่น () {
        // รับ droppable มีปฏิสัมพันธ์กับรายการเพิ่มจัดเรียง // ใช้ connectWithSortable สามารถแก้ปัญหานี้ แต่ไม่ได้ช่วยให้คุณสามารถปรับแต่งการใช้งาน / hoverClass ตัวเลือก $ (นี้) .removeClass ( "UI-รัฐเริ่มต้น");
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ผลิตภัณฑ์">
  <ระดับ H1 = "UI-Widget หัว"> ผลิตภัณฑ์ </ h1>
  <div id = "แคตตาล็อก">
    <h2> <a href="#"> เสื้อยืด </a> </ h2>
    <div>
      <ul>
        <li> เสื้อ Lolcat </ li>
        <li> Cheezeburger เสื้อ </ li>
        <li> Buckit เสื้อ </ li>
      </ ul>
    </ div>
    <h2> กระเป๋า <a href="#"> </a> </ h2>
    <div>
      <ul>
        <li> ม้าลายลาย </ li>
        <li> หนังสีดำ </ li>
        <li> หนังจระเข้ </ li>
      </ ul>
    </ div>
    <h2> <a href="#"> Gadgets </a> </ h2>
    <div>
      <ul>
        <li> iPhone </ li>
        <li> iPod </ li>
        <li> iPad </ li>
      </ ul>
    </ div>
  </ div>
</ div>
 
<div id = "รถเข็น">
  <ระดับ H1 = "UI-Widget หัว"> รถเข็น </ h1>
  <ระดับ Div = "UI-Widget เนื้อหา">
    <ol>
      <li class = "ยึด"> เพิ่มสินค้าที่นี่ </ li>
    </ ol>
  </ div>
</ div>
 
 
</ body>
</ html>

ผู้จัดการภาพที่เรียบง่าย

คุณสามารถลากและวางภาพถ่ายไปยังถังรีไซเคิลหรือคลิกที่ไอคอนรูปถังขยะเพื่อลบภาพ

คุณสามารถลากและวางภาพถ่ายลงในอัลบั้มหรือคลิกไอคอนรีไซเคิลเพื่อเรียกคืนภาพถ่าย

คุณสามารถซูมได้โดยคลิกที่ไอคอนเพื่อดูภาพขนาดใหญ่ jQuery UI การโต้ตอบ (โต้ตอบ) หมายถึงหน้าต่างกิริยา

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI เพลส (droppable) - ผู้จัดการภาพที่เรียบง่าย </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #gallery {ลอย: ด้านซ้าย; ความกว้าง: 65%; นาที-height: 12em;}
  .gallery.custom รัฐที่ใช้งาน {พื้นหลัง: #eee;}
  .gallery li {ลอย: ด้านซ้าย; ความกว้าง: 96 พิกเซล; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: ศูนย์;}
  .gallery li H5 {margin: 0 0 0.4em; เคอร์เซอร์: ย้าย;}
  .gallery หลี่ {ลอย: ขวา;}
  .gallery Li-a.ui ไอคอน ZoomIn {ลอย: ด้านซ้าย;}
  .gallery li img {ความกว้าง: 100%; เคอร์เซอร์: ย้าย;}
 
  #trash {ลอย: ขวา; ความกว้าง: 32%; นาที-height: 18em; padding: 1%;}
  H4 #trash {line-height: 16px; margin: 0 0 0.4em;}
  #trash H4 .ui ไอคอน {ลอย: ด้านซ้าย;}
  #trash .gallery H5 {display: none;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    // นี่คืออัลบั้มและถังขยะ var $ แกลเลอรี่ = $ ( "#gallery")
      ถังขยะ $ = $ ( "#trash");
 
    // ให้ป้อนข้อมูลอัลบั้มที่ลาก $ ( "หลี่", $ แกลเลอรี่) .draggable ({
      ยกเลิก "a.ui ไอคอน", // คลิกที่ไอคอนไม่ได้เริ่มต้นการลากย้อนกลับ: "ไม่ถูกต้อง", // เมื่อไม่ได้ตำแหน่งรายการจะเปลี่ยนกลับไปบรรจุตำแหน่งเดิม "เอกสาร"
      ผู้ช่วย "โคลน"
      เคอร์เซอร์: "ย้าย"
    });
 
    // ขอถังขยะสามารถวางได้รับการยอมรับรายการอัลบั้ม $ trash.droppable ({
      ยอมรับ "#gallery> li"
      activeClass: "UI-รัฐไฮไลท์"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        deleteImage (ui.draggable);
      }
    });
 
    // ทำอัลบั้มที่สามารถวางได้รับการยอมรับใน Recycle Bin รายการ $ gallery.droppable ({
      ยอมรับ "#trash ลี่"
      activeClass: "กำหนดเองของรัฐที่ใช้งาน"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        recycleImage (ui.draggable);
      }
    });
 
    // ภาพลบ recycle_icon ฟังก์ชั่น var = "<a href = 'การเชื่อมโยง / เพื่อ / รีไซเคิล / script / เมื่อ / เรา / มี / js / ปิด' title = 'ภาพการบูรณะ' class = 'UI-ไอคอน UI-ไอคอนรีเฟรช' > เรียกคืนภาพ </a> ";
    ฟังก์ชั่น deleteImage ($ รายการ) {
      $ Item.fadeOut (ฟังก์ชั่น () {
        var $ รายการ = $ ( "UL", $ ถังขยะ) .length?
          $ ( "Ul", $ ถังขยะ):
          $ ( "<ul class = 'แกลเลอรี่ UI-ผู้ช่วยรีเซ็ต' />") .appendTo ($ ถังขยะ);
 
        $ Item.find ( "a.ui ไอคอนถังขยะ") remove ();
        $ Item.append (recycle_icon) .appendTo ($ รายการ) .fadeIn (ฟังก์ชั่น () {
          $ รายการ
            .animate ({กว้าง: "48px"})
            ประจำวันหา ( "img")
              .animate ({ความสูง: "36px"});
        });
      });
    }
 
    // Image Restore trash_icon var = "<a href = 'การเชื่อมโยง / เพื่อ / ถังขยะ / script / เมื่อ / เรา / มี / js / ปิด' title = 'ลบภาพ' class = 'UI-ไอคอน UI-ไอคอนถังขยะ' > ลบภาพ </a> ";
    ฟังก์ชั่น recycleImage ($ รายการ) {
      $ Item.fadeOut (ฟังก์ชั่น () {
        $ รายการ
          ประจำวันหา ( "a.ui ไอคอนรีเฟรช")
            remove ()
          .end ()
          .css ( "width", "96 พิกเซล")
          .append (trash_icon)
          ประจำวันหา ( "img")
            .css ( "height", "72px")
          .end ()
          .appendTo ($ แกลลอรี่)
          .fadeIn ();
      });
    }
 
    // ภาพคุณลักษณะตัวอย่างสาธิต ui.dialog ใช้เป็น viewLargerImage ฟังก์ชั่นหน้าต่างกิริยา ($ link) {
      var src = $ link.attr ( "href")
        title = $ link.siblings ( "img") .attr ( "alt")
        $ Modal = $ ( "img [src $ = '" + src + "']");
 
      ถ้า ($ modal.length) {
        $ Modal.dialog ( "เปิด");
      } else {
        var img = $ ( "<img alt = '" + ชื่อ + "width =" 384 "height =" 288 "style =" display: none; padding: 8px;' /> ")
          .attr ( "src" src) .appendTo ( "ร่างกาย");
        setTimeout (ฟังก์ชั่น () {
          img.dialog ({
            ชื่อเรื่อง: ชื่อ
            ความกว้าง: 400
            กิริยา: จริง
          });
        } 1);
      }
    }
 
    // พร็อกซี่แก้ไอคอนพฤติกรรม $ ( "ul.gallery> li") ผ่านเหตุการณ์จำนวนคลิก (ที่ฟังก์ชั่น (event) {
      var $ รายการ = $ (นี้)
        $ target = $ (event.target);
 
      ถ้า ($ target.is ( "a.ui ไอคอนถังขยะ")) {
        deleteImage ($ รายการ);
      } else if ($ target.is ( "a.ui-ไอคอน ZoomIn")) {
        viewLargerImage ($ เป้าหมาย);
      } else if ($ target.is ( "a.ui ไอคอนรีเฟรช")) {
        recycleImage ($ รายการ);
      }
 
      กลับเท็จ;
    });
  });
  </ script>
</ head>
<body>
 
<ระดับ Div = "UI-Widget UI-ผู้ช่วย clearfix">
 
<ul id = "แกลเลอรี่" class = "แกลเลอรี่ UI-ผู้ช่วยรีเซ็ต UI-ผู้ช่วย clearfix">
  <ระดับ Li = "UI-Widget เนื้อหา UI-มุม-TR">
    <ระดับ H5 = "UI-Widget หัว"> High Tatras </ h5>
    <img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "High Tatras สูงสุด" width = "96" height = "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>
  </ li>
  <ระดับ Li = "UI-Widget เนื้อหา UI-มุม-TR">
    <ระดับ H5 = "UI-Widget หัว"> High Tatras 2 </ h5>
    <img src = "../ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = "96" height = "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>
  </ li>
  <ระดับ Li = "UI-Widget เนื้อหา UI-มุม-TR">
    <ระดับ H5 = "UI-Widget หัว"> High Tatras 3 </ h5>
    <img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "แผนปีนเขา" width = "96" height = "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>
  </ li>
  <ระดับ Li = "UI-Widget เนื้อหา UI-มุม-TR">
    <ระดับ H5 = "UI-Widget หัว"> High Tatras 4 </ h5>
    <img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "ที่ด้านบนของ Kozi kopka ว่า" width = "96" height = "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>
  </ li>
</ ul>
 
<div id = "ถังขยะ" class = "UI-Widget เนื้อหา UI-รัฐเริ่มต้น">
  <ระดับ H4 = "UI-Widget หัว"> <span class = "UI-ไอคอน UI-ไอคอนถังขยะ"> ถังขยะ </ span> ถังขยะ </ h4>
</ div>
 
</ div>
 
 
</ body>
</ html>

การแสดงผลภาพ

เมื่อโฉบเหนือ droppable หรือเมื่อ droppable ถูกเปิดใช้งาน (เช่นการลากไปมาได้รับการยอมรับวางอยู่บน droppable) เมื่อมีการเปลี่ยนแปลงลักษณะ droppable ใช้ hoverClass หรือ activeClass ตัวเลือกในการระบุชั้นตามลำดับ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI สถานที่ (droppable) - การแสดงผลภาพ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable # draggable2 {กว้าง: 90px; ความสูง: 90px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px 10px 10px 0;}
  #droppable # droppable2 {กว้าง: 120px; ความสูง: 120px; padding: 0.5em; ลอย: ด้านซ้าย; margin: 10px;}
  h3 {ชัดเจนซ้าย;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      hoverClass: "UI รัฐ-hover"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "P")
            .html ( "ลดลง!");
      }
    });
 
    $ ( "# Draggable2") .draggable ();
    $ ( "# Droppable2") .droppable ({
      ยอมรับ: "# draggable2"
      activeClass: "UI-รัฐเริ่มต้น"
      วางฟังก์ชั่น (เหตุการณ์ UI) {
        $ (นี้)
          .addClass ( "UI-รัฐไฮไลท์")
          ประจำวันหา ( "P")
            .html ( "ลดลง!");
      }
    });
  });
  </ script>
</ head>
<body>
 
<h3> เมื่อโฉบเหนือ droppable เมื่อข้อเสนอแนะ: </ h3>
 
<div id = "ลากไปมาได้" class = "UI-Widget เนื้อหา">
  <p> โปรดลากฉันไปยังปลายทาง </ p>
</ div>
 
<div id = "droppable" class = "UI-Widget หัว">
  <p> โปรดใส่ในที่นี่ </ p>
</ div>
 
<h3> เมื่อเปิดใช้งานข้อเสนอแนะที่ลาก: </ h3>
 
<div id = "draggable2" class = "UI-Widget เนื้อหา">
  <p> โปรดลากฉันไปยังปลายทาง </ p>
</ div>
 
<div id = "droppable2" class = "UI-Widget หัว">
  <p> โปรดใส่ในที่นี่ </ p>
</ div>
 
 
</ body>
</ html>

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - ลาก (ลาก)

ถัดไป: เช่น jQuery UI - ซูม (ปรับขนาดได้)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง