Latest web development tutorials

jQuery UI contoh - tempat (droppable)

Widget yang dapat diseret untuk membuat target.

Untuk rincian lebih lanjut tentang interaksi droppable, lihat dokumentasi API dapat ditempatkan bagian-bagian kecil (droppable Widget) .

Fungsi standar

Mengaktifkan fungsi droppable pada setiap elemen DOM, dan dapat menarik widget untuk membuat target.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - Fungsi standar </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #draggable {width: 100px; height: 100px; padding: 0.5em; float: kiri; margin: 10px 10px 10px 0;}
  #droppable {width: 150px; height: 150px; padding: 0.5em; float: kiri; margin: 10px;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "p")
            html ( "Menjatuhkan!");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "draggable" class = "ui-widget-content">
  <P> Kirimkan saya diseret ke tempat sasaran! </ P>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> Jauhkan dari sini! </ P>
</ Div>
 
 
</ Body>
</ Html>

diterima

Gunakan accept opsi penargetan elemen droppable yang menerima (atau kelompok elemen).

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - diterima </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #droppable {width: 150px; height: 150px; padding: 0.5em; float: kiri; margin: 10px;}
  #draggable, # diseret-nonvalid {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#draggable, # Draggable-nonvalid") .draggable ();
    $ ( "#droppable") .droppable ({
      menerima: "#draggable",
      activeClass: "ui-negara melayang-layang",
      hoverClass: "ui-negara-aktif",
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "p")
            html ( "Menjatuhkan!");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "draggable-nonvalid" class = "ui-widget-content">
  <P> Saya tidak dapat ditempatkan draggable </ p>
</ Div>
 
<Div id = "draggable" class = "ui-widget-content">
  <P> Silahkan menyeret saya ke tujuan </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> menerima: '#draggable' </ p>
</ Div>
 
 
</ Body>
</ Html>

Mencegah penyebaran

Bila menggunakan droppable bersarang - misalnya, Anda dapat memiliki struktur direktori pohon-diedit dengan folder dan node dokumen - greedy opsi disetel ke benar ketika draggable untuk mencegah ditempatkan pada node anak (droppable) ketika propagasi acara.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - mencegah penyebaran </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #draggable {width: 100px; height: 40px; padding: 0.5em; float: kiri; margin: 10px 10px 10px 0;}
  #droppable, # droppable2 {width: 230px; height: 120px; padding: 0.5em; float: kiri; margin: 10px;}
  # Droppable-batin, # droppable2-batin {width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#draggable") .draggable ();
 
    $ ( "#droppable, # Droppable-batin") .droppable ({
      activeClass: "ui-negara melayang-layang",
      hoverClass: "ui-negara-aktif",
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "> p")
            html ( "Menjatuhkan!");
        return false;
      }
    });
 
    $ ( "# Droppable2, # droppable2-batin") .droppable ({
      serakah: benar,
      activeClass: "ui-negara melayang-layang",
      hoverClass: "ui-negara-aktif",
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "> p")
            html ( "Menjatuhkan!");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "draggable" class = "ui-widget-content">
  <P> Silahkan menyeret saya ke tujuan </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> External droppable </ p>
  <Div id = "droppable-batin" class = "ui-widget-header">
    <P> internal droppable (tanpa serakah) </ p>
  </ Div>
</ Div>
 
<Div id = "droppable2" class = "ui-widget-header">
  <P> External droppable </ p>
  <Div id = "droppable2-batin" class = "ui-widget-header">
    <P> droppable internal (dengan serakah) </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Kembalikan lokasi draggable

Seperti dengan nilai Boolean revert ketika opsi draggable berhenti menyeret, kembali diseret (atau asisten nya) ke lokasi asli.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - pengurangan posisi draggable </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;}
  #droppable {width: 150px; height: 150px; padding: 0.5em; float: kiri; margin: 10px;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#draggable") .draggable ({Kembalikan: "valid"});
    $ ( "# Draggable2") .draggable ({kembali: "tidak sah"});
 
    $ ( "#droppable") .droppable ({
      activeClass: "ui-negara-default",
      hoverClass: "ui-negara melayang-layang",
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "p")
            html ( "ditempatkan!");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "draggable" class = "ui-widget-content">
  <P> pengurangan ketika ditempatkan pada target </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Ketika pengurangan tersebut tidak ditempatkan pada target </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> Silakan dimasukkan ke dalam sini </ p>
</ Div>
 
 
</ Body>
</ Html>

Keranjang Belanja Demo

Menunjukkan bagaimana menggunakan panel lipat untuk menampilkan struktur direktori produk, menggunakan drag dan drop untuk menambahkan produk ke keranjang belanja, produk keranjang belanja yang diurutkan.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - Keranjang Belanja Demo </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  h1 {padding: .2em; margin: 0;}
  #products {float: kiri; width: 500px; margin-right: 2em;}
  #cart {width: 200px; float: left; margin-top: 1em;}
  / * Tentukan daftar gaya untuk memaksimalkan droppable * /
  #cart ol {margin: 0; padding: 1em 0 1em 3em;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#catalog") .accordion ();
    $ ( "#catalog Li") .draggable ({
      appendTo: "tubuh",
      helper: "clone"
    });
    $ ( "#cart Ol") .droppable ({
      activeClass: "ui-negara-default",
      hoverClass: "ui-negara melayang-layang",
      menerima: ": tidak (Ui-diurutkan-helper)",
      menjatuhkan: function (event, ui) {
        $ (Ini) .find ( ".placeholder") .remove ();
        $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (ini);
      }
    }). Sortable ({
      item: "li: tidak (.placeholder)",
      sort: function () {
        // Dapatkan droppable berinteraksi dengan entri menambahkan diurutkan // menggunakan connectWithSortable dapat memecahkan masalah ini, tetapi tidak memungkinkan Anda untuk menyesuaikan aktif / hoverClass opsi $ (ini) .removeClass ( "ui-negara-default");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "produk">
  <Class H1 = "ui-widget-header"> Produk </ h1>
  <Div id = "katalog">
    <H2> <a href="#"> T-Shirts </a> </ h2>
    <Div>
      <Ul>
        <Li> Lolcat Kaos </ li>
        <Li> Cheezeburger Kaos </ li>
        <Li> Buckit Kaos </ li>
      </ Ul>
    </ Div>
    <H2> Tas <a href="#"> </a> </ h2>
    <Div>
      <Ul>
        <Li> Zebra Striped </ li>
        <Li> Black Leather </ li>
        <Li> Alligator Kulit </ li>
      </ Ul>
    </ Div>
    <H2> <a href="#"> Gadget </a> </ h2>
    <Div>
      <Ul>
        <Li> iPhone </ li>
        <Li> iPod </ li>
        <Li> iPad </ li>
      </ Ul>
    </ Div>
  </ Div>
</ Div>
 
<Div id = "keranjang">
  <Class H1 = "ui-widget-header"> keranjang </ h1>
  <Class Div = "ui-widget-content">
    <Ol>
      <Li class = "placeholder"> menambahkan produk di sini </ li>
    </ Ol>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Sederhana Photo Manager

Anda dapat drag dan drop foto ke Recycle Bin atau klik ikon tempat sampah untuk menghapus foto.

Anda dapat drag dan drop foto ke dalam album atau klik ikon recycle untuk mengembalikan foto.

Anda dapat tampilannya dengan mengklik icon untuk melihat gambar yang lebih besar. jQuery UI Dialog (dialog) berarti untuk jendela modal.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - Manajer foto sederhana </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #gallery {float: kiri; width: 65%; min-height: 12em;}
  .gallery.custom-negara-aktif {background: #eee;}
  .gallery li {float: left; width: kali 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;}
  .gallery li h5 {margin: 0 0 0.4em; kursor: bergerak;}
  .gallery li a {float: right;}
  .gallery li a.ui-icon-zoomin {float: left;}
  .gallery li img {width: 100%; kursor: bergerak;}
 
  #trash {float: right; width: 32%; min-height: 18em; padding: 1%;}
  #trash h4 {line-height: 16px; margin: 0 0 0.4em;}
  #trash h4 Ui-icon {float: left;}
  #trash .gallery h5 {display: none;}
  </ Style>
  <Script>
  $ (Fungsi () {
    // Ini adalah sebuah album dan sampah var $ galeri = $ ( "#gallery"),
      $ Sampah = $ ( "#trash");
 
    // Membuat entri album draggable $ ( "li", $ galeri) .draggable ({
      membatalkan: "a.ui-icon", // klik pada ikon tidak mulai menyeret kembali: "tidak sah", // Ketika unplaced, entri akan kembali ke posisi semula penahanan nya: "dokumen",
      helper: "clone",
      kursor: "bergerak"
    });
 
    // Mari sampah dapat ditempatkan, menerima entri album $ trash.droppable ({
      menerima: "#gallery> li",
      activeClass: "ui-negara-highlight",
      menjatuhkan: function (event, ui) {
        deleteImage (ui.draggable);
      }
    });
 
    // Membuat album dapat ditempatkan, menerima Recycle Bin masuk $ gallery.droppable ({
      menerima: "#trash li",
      activeClass: "kustom negara-aktif-",
      menjatuhkan: function (event, ui) {
        recycleImage (ui.draggable);
      }
    });
 
    // Gambar menghapus fungsi var recycle_icon = "<a href = 'Link / ke / recycle / script / ketika / kita / punya / js / off' title = 'image dikembalikan' class = 'ui-icon ui-icon refresh' > mengembalikan citra </a> ";
    Fungsi deleteImage ($ item) {
      $ Item.fadeOut (function () {
        var $ list = $ ( "ul", $ sampah) .length?
          $ ( "Ul", $ sampah):
          $ ( "<Ul class = 'galeri ui-helper-ulang' />") .appendTo ($ sampah);
 
        $ Item.find ( "a.ui-icon-sampah") .remove ();
        $ Item.append (recycle_icon) .appendTo ($ list) .fadeIn (function () {
          $ Barang
            .animate ({width: "48px"})
            .find ( "img")
              .animate ({height: "36px"});
        });
      });
    }
 
    // Pemulihan var trash_icon = "<a href = 'Link / ke / sampah / script / ketika / kita / punya / js / off' title = 'Hapus image' class = 'ui-icon ui-icon-sampah' > menghapus gambar </a> ";
    Fungsi recycleImage ($ item) {
      $ Item.fadeOut (function () {
        $ Barang
          .find ( "a.ui-icon refresh")
            .remove ()
          END ()
          Css ( "width", "kali 96px")
          Append (trash_icon)
          .find ( "img")
            Css ( "tinggi", "72px")
          END ()
          .appendTo ($ galeri)
          .fadeIn ();
      });
    }
 
    // Gambar fitur Preview, Demos ui.dialog digunakan sebagai viewLargerImage fungsi jendela modal ($ link) {
      var src = $ link.attr ( "href"),
        title = $ link.siblings ( "img") attr ( "alt"),
        $ Modal = $ ( "img [src $ = '" + src + "']");
 
      if ($ modal.length) {
        $ Modal.dialog ( "open");
      } Lain {
        var img = $ ( "<img alt = '" + judul + "' = lebar '384' height = '288' style = 'display: none; padding: 8px;' />")
          attr ( "src", src) .appendTo ( "tubuh");
        setTimeout (function () {
          img.dialog ({
            title: judul,
            width: 400,
            modal: true
          });
        }, 1);
      }
    }
 
    // Proxy ikon memecahkan perilaku $ ( "ul.gallery> li") melalui acara .Klik (function (event) {
      var $ item = $ (ini),
        $ Target = $ (event.target);
 
      if ($ target.is ( "a.ui-icon-sampah")) {
        deleteImage ($ item);
      } Lain jika ($ target.is ( "a.ui-icon-zoomin")) {
        viewLargerImage ($ target);
      } Lain jika ($ target.is ( "a.ui-icon refresh")) {
        recycleImage ($ item);
      }
 
      return false;
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Class Div = "ui-widget ui-helper-clearfix">
 
<Ul id = "galeri" class = "galeri ui-helper-ulang ui-helper-clearfix">
  <Class Li = "ui-widget-konten ui-sudut-tr">
    <Class H5 = "ui-widget-header"> Tinggi Tatras </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Tinggi Tatras puncak" width = "96" height = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View </a> Larger
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> menghapus gambar </a>
  </ Li>
  <Class Li = "ui-widget-konten ui-sudut-tr">
    <Class H5 = "ui-widget-header"> Tinggi 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"> View </a> Larger
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> menghapus gambar </a>
  </ Li>
  <Class Li = "ui-widget-konten ui-sudut-tr">
    <Class H5 = "ui-widget-header"> Tinggi Tatras 3 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Rencana Climbing" width = "96" height = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View </a> Larger
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> menghapus gambar </a>
  </ Li>
  <Class Li = "ui-widget-konten ui-sudut-tr">
    <Class H5 = "ui-widget-header"> Tinggi Tatras 4 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "di bagian atas Kozi kopka" width = "96" height = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View </a> Larger
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> menghapus gambar </a>
  </ Li>
</ Ul>
 
<Div id = "sampah" class = "ui-widget-konten ui-negara-default">
  <Class H4 = "ui-widget-header"> <span class = "ui-icon ui-icon-sampah"> Sampah </ span> Sampah </ h4>
</ Div>
 
</ Div>
 
 
</ Body>
</ Html>

umpan balik visual

Ketika melayang di atas droppable, atau ketika droppable diaktifkan (yaitu, diseret diterima ditempatkan pada droppable) ketika mengubah penampilan droppable. Gunakan hoverClass atau activeClass pilihan untuk menentukan kelas, masing-masing.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI tempat (droppable) - umpan balik visual </ title>
  <Link rel = "stylesheet" 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 = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #draggable, # draggable2 {width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;}
  #droppable, # droppable2 {width: 120px; height: 120px; padding: 0.5em; float: kiri; margin: 10px;}
  h3 {jelas: kiri;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      hoverClass: "ui-negara melayang-layang",
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "p")
            html ( "Menjatuhkan!");
      }
    });
 
    $ ( "# Draggable2") .draggable ();
    $ ( "# Droppable2") .droppable ({
      menerima: "# draggable2",
      activeClass: "ui-negara-default",
      menjatuhkan: function (event, ui) {
        $ (Ini)
          .addClass ( "ui-negara-highlight")
          .find ( "p")
            html ( "Menjatuhkan!");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<H3> Ketika melayang di atas droppable ketika umpan balik: </ h3>
 
<Div id = "draggable" class = "ui-widget-content">
  <P> Silahkan menyeret saya ke tujuan </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> Silakan dimasukkan ke dalam sini </ p>
</ Div>
 
<H3> Ketika diaktifkan umpan balik draggable: </ h3>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Silahkan menyeret saya ke tujuan </ p>
</ Div>
 
<Div id = "droppable2" class = "ui-widget-header">
  <P> Silakan dimasukkan ke dalam sini </ p>
</ Div>
 
 
</ Body>
</ Html>