Latest web development tutorials

jQuery UI przykładem - miejsce (Droppable)

Widgety, które można przeciągać do stworzenia docelowej.

Aby uzyskać więcej informacji na temat droppable interakcji można znaleźć w dokumentacji API można umieścić małe części (Droppable Widget) .

Domyślną funkcją

Włączenie funkcji droppable na dowolnym elemencie DOM, można przeciągnąć do tworzenia widgetów cel. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - Domyślna funkcja </ 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">
  <Style>
  #draggable {width: 100px; height: 100px; padding: 0.5em; pływaka: lewej; margin: 10px 10px 10px 0;}
  #droppable {width: 150px; height: 150px; padding: 0.5em; pływaka: lewej; margin: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "p")
            .html ( "spadł!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "przeciągany" class = "ui-widget-content">
  <P> Proszę wysłać mi zaciągać do miejsca docelowego! </ P>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> Trzymać się stąd! </ P>
</ Div>
 
 
</ Body>
</ Html>

Przyjęte

Użyj accept opcje kierowania droppable element, który akceptuje (lub grupy elementów). 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - zaakceptowane </ 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">
  <Style>
  #droppable {width: 150px; height: 150px; padding: 0.5em; pływaka: lewej; margin: 10px;}
  #draggable, # przeciągany-nonvalid {width: 100px; height: 100px; padding: 0.5em; pływaka: left; margin: 10px 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable, # Draggable-nonvalid") .draggable ();
    $ ( "#droppable") .droppable ({
      Akceptujemy: "#draggable"
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-aktywny",
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "p")
            .html ( "spadł!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "przeciągany-nonvalid" class = "ui-widget-content">
  <P> I nie można umieścić przeciągany </ p>
</ Div>
 
<Div id = "przeciągany" class = "ui-widget-content">
  <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> zaakceptować: "#draggable" </ p>
</ Div>
 
 
</ Body>
</ Html>

Zapobiec rozprzestrzenianiu

Podczas używania zagnieżdżonych droppable - na przykład, można mieć drzewo można edytować strukturę katalogów z folderów i dokumentów węzłów - greedy opcja jest ustawiona na wartość true, gdy przeciągany, aby zapobiec wprowadzaniu na węzłach podrzędnych (droppable), gdy propagacja zdarzenia. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - zapobiegania rozprzestrzenianiu </ 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">
  <Style>
  #draggable {width: 100px; height: 40px; padding: 0.5em; pływaka: lewej; margin: 10px 10px 10px 0;}
  #droppable, # droppable2 {width: 230px; height: 120 pikseli; padding: 0.5em; pływaka: lewej; margin: 10px;}
  # Droppable-wewnętrzna, # droppable2-wewnętrzna {width: 170 pikseli; height: 60px; padding: 0.5em; pływaka: left; margin: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
 
    $ ( "#droppable, # Droppable-wewnętrzna") .droppable ({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-aktywny",
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "> p")
            .html ( "spadł!");
        return false;
      }
    });
 
    $ ( "# Droppable2, # droppable2-wewnętrzna") .droppable ({
      chciwi: prawda,
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-aktywny",
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "> p")
            .html ( "spadł!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "przeciągany" class = "ui-widget-content">
  <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> droppable zewnętrzna </ p>
  <Div id = "droppable-wewnętrzna" class = "ui-widget-header">
    <P> droppable wewnętrzna (bez chciwy) </ p>
  </ Div>
</ Div>
 
<Div id = "droppable2" class = "ui-widget-header">
  <P> droppable zewnętrzna </ p>
  <Div id = class "droppable2-wewnętrzna" = "ui-widget-header">
    <P> droppable Wewnętrznego (z chciwym) </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Przywracanie Draggable lokalizację

Podobnie jak w przypadku wartości logiczne revert , gdy opcja przeciągany zatrzymać przeciąganie, powrót przeciągany (lub jego zastępca) do pierwotnej lokalizacji. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - redukcja przeciągany pozycji </ 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">
  <Style>
  #draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; pływaka: left; margin: 10px 10px 10px 0;}
  #droppable {width: 150px; height: 150px; padding: 0.5em; pływaka: lewej; margin: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Przywróć: "ważna"});
    $ ( "# Draggable2") .draggable ({powróci: "nieważny"});
 
    $ ( "#droppable") .droppable ({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "p")
            .html ( "umieszczona!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "przeciągany" class = "ui-widget-content">
  <P> redukcja gdy umieszczone na tarczy </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Gdy redukcja nie jest umieszczony na tarczy </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> Proszę wprowadzić tutaj </ p>
</ Div>
 
 
</ Body>
</ Html>

Koszyk Koszyk Demo

Pokazuje, jak wykorzystać panel składany, aby wyświetlić strukturę katalogów produktów, użyj przeciągnij i upuść, aby dodać produkty do koszyka, koszyk produkty są sortable. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - Koszyk 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">
  <Style>
  h1 {padding: .2em; margin: 0;}
  #products {float: left; width: 500px; margin-right: 2em;}
  #cart {width: 200px; pływaka: left; margin-top: 1 em;}
  / * Definiowanie listy stylów, aby zmaksymalizować droppable * /
  #cart ol {margin: 0; padding: 1 em 0 1em 3em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#catalog") .accordion ();
    $ ( "#catalog Li") .draggable ({
      appendTo: "ciało",
      pomocnika "klon"
    });
    $ ( "#cart Ol") .droppable ({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      zaakceptować ": nie (.ui-sortowalny pomocniczych)"
      drop: function (event, ui) {
        $ (This) .find ( ".placeholder") .Wykręcić ();
        $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (this);
      }
    }). Sortable ({
      pozycje: "Li: nie (.placeholder)"
      sort: function () {
        // Pobierz droppable interakcji z sortable dodanego wpisu // użyć connectWithSortable może rozwiązać ten problem, ale nie pozwala dostosować aktywny / hoverClass funkcji $ (this) .removeClass ( "ui-state-default");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "produkty">
  <H1 class = "ui-widget-header"> Produkty </ h1>
  <Div id = "katalog">
    <H2> <a href="#"> Koszulki </a> </ h2>
    <Div>
      <Ul>
        <Li> Lolcat koszulka </ li>
        <Li> Cheezeburger koszulka </ li>
        <Li> Buckit koszulka </ li>
      </ Ul>
    </ Div>
    <H2> <a Torby href="#"> </a> </ h2>
    <Div>
      <Ul>
        <Li> Zebra w paski </ li>
        <Li> Black Leather </ li>
        <Li> Alligator Skóra </ li>
      </ Ul>
    </ Div>
    <H2> <a href="#"> Gadżety </a> </ h2>
    <Div>
      <Ul>
        <Li> iPhone </ li>
        <Li> iPod </ li>
        <Li> iPad </ li>
      </ Ul>
    </ Div>
  </ Div>
</ Div>
 
<Div id = "koszyk">
  <H1 class = "ui-widget-header"> koszyk </ h1>
  <Div class = "ui-widget-content">
    <Ol>
      <Li class = "zastępczy"> dodać produkty tutaj </ li>
    </ Ol>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Proste Photo Manager

Można przeciągać i upuszczać zdjęcia do Kosza lub kliknij ikonę kosza aby usunąć zdjęcie.

Można przeciągać i upuszczać zdjęcia w albumach lub kliknij ikonę Kosza, aby przywrócić zdjęcia.

Można powiększyć klikając na ikonę, aby wyświetlić jego powiększenie. jQuery UI Dialog (Okno) środki do modalnego okna. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - prosty menedżer zdjęć </ 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">
  <Style>
  #gallery {float: left; width: 65%; min-wysokość: 12em;}
  .gallery.custom-state-aktywne {background: #eee;}
  .gallery li {float: left; width: x 96 pikseli; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;}
  .gallery li h5 {margin: 0 0 0.4em; kursora: ruch;}
  .gallery li {float: right;}
  .gallery li a.ui-icon-zoomin {float: left;}
  .gallery li img {width: 100%; kursora: ruch;}
 
  #trash {float: right; width: 32%; min-wysokość: 18em; padding: 1%;}
  #trash h4 {line-height: 16px; margin: 0 0 0.4em;}
  #trash H4 .ui-ikona {float: left;}
  #trash .gallery h5 {display: none;}
  </ Style>
  <Script>
  $ (Function () {
    // To jest album i śmieci galerię var $ = $ ( "#gallery"),
      $ Kosz = $ ( "#trash");
 
    // Uzależnić wprowadzanie album Draggable $ ( "li", $ galeria) .draggable ({
      anuluj "a.ui-ikona", // kliknąć na ikonie nie uruchamia przeciągając powróci: "nieważne", // Kiedy nieużyte wpis powróci do swojego pierwotnego położenia skażenia: "dokument",
      pomocnika "klon"
      Kursor "przenieść"
    });
 
    // Niech śmieci mogą być umieszczone, przyjął wpis album $ trash.droppable ({
      Akceptujemy: "#gallery> li"
      activeClass: "ui-state-highlight"
      drop: function (event, ui) {
        deleteImage (ui.draggable);
      }
    });
 
    // Sprawdź, album może być umieszczony, przyjął Kosz wpis $ gallery.droppable ({
      Akceptujemy: "#trash li",
      activeClass: "custom-state-aktywny",
      drop: function (event, ui) {
        recycleImage (ui.draggable);
      }
    });
 
    // Funkcja Obraz usuwać var ​​recycle_icon = "<a href =" link / do / recycle / script / kiedy / my / mieć / js / off 'title =' przywrócony obraz 'class =' ​​ui-ui-ikona ikona odświeżania " > przywracanie obrazu </a> ";
    Funkcja deleteImage ($ item) {
      $ Item.fadeOut (function () {
        var $ list = $ ( "UL", $ śmieci) .length?
          $ ( "Ul", $ śmieci):
          $ ( "<Ul class =" Galeria ui-pomocnika-reset '/> ") .appendTo ($ śmieci);
 
        $ Item.find ( "a.ui-icon-śmieci") .Wykręcić ();
        $ Item.append (recycle_icon) .appendTo (wykaz $) .fadeIn (function () {
          $ Pozycja
            .animate ({width: "48px"})
            .find ( "img")
              .animate ({height: "36 px"});
        });
      });
    }
 
    // Var trash_icon Image Restore = "<a href =" link / do / trash / script / kiedy / my / mieć / js / off 'title =' Usuń obraz 'class =' ​​ui ui-icon-icon-śmieci " > usuń obrazu </a> ";
    Funkcja recycleImage ($ item) {
      $ Item.fadeOut (function () {
        $ Pozycja
          .find ( "a.ui-icon-Refresh")
            .Wykręcić ()
          .END ()
          .css ( "width", "x 96 pikseli")
          .append (trash_icon)
          .find ( "img")
            .css ( "wysokość", "72px")
          .END ()
          .appendTo ($ galeria)
          .fadeIn ();
      });
    }
 
    // Funkcja Podgląd obrazu, Demos ui.dialog stosowany jako viewLargerImage modalna funkcji okna ($ Link) {
      var src = $ link.attr ( "href"),
        title = $ link.siblings ( "img") .attr ( "alt"),
        Modal $ = $ ( "img [src $ = '" + src + "']");
 
      if ($ modal.length) {
        $ Modal.dialog ( "open");
      } Else {
        var img = $ ( "<img alt =" "+ nazwa +" "width =" 384 "height =" 288 "style =" display: none; padding: 8 pikseli; "/>")
          .attr ( "src" src) .appendTo ( "body");
        setTimeout (function () {
          img.dialog ({
            tytuł: tytuł,
            szerokość: 400,
            modalne: true
          });
        }, 1);
      }
    }
 
    // Proxy ikona rozwiązywania zachowanie $ ( "ul.gallery> li") w czasie zdarzenia .Kliknij (function (zdarzenia) {
      var $ item = $ (this),
        $ Docelowa = $ (event.target);
 
      if ($ target.is ( "a.ui-icon-śmieci")) {
        deleteImage ($ item);
      } Else if ($ target.is ( "a.ui-icon-zoomin")) {
        viewLargerImage ($ docelowy);
      } Else if ($ target.is ( "a.ui-icon-Refresh")) {
        recycleImage ($ item);
      }
 
      return false;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "ui ui widget wspomagających clearfix">
 
<Ul id = "galeria" class = "Galeria ui ui pomocnika-reset wspomagających clearfix">
  <Li class = "widget-ui ui-content-corner-tr">
    <H5 class = "ui-widget-header"> Tatry </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Wysokie Tatry szczytowa" width = "96" height = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a>
  </ Li>
  <Li class = "widget-ui ui-content-corner-tr">
    <H5 class = "ui-widget-header"> Wysokie Tatry 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 Larger </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a>
  </ Li>
  <Li class = "widget-ui ui-content-corner-tr">
    <H5 class = "ui-widget-header"> Wysokie Tatry 3 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Plan Climbing" width = "96" height = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a>
  </ Li>
  <Li class = "widget-ui ui-content-corner-tr">
    <H5 class = "ui-widget-header"> Wysokie Tatry 4 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "na szczycie Koziego Kopka" width = "96" height = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a>
  </ Li>
</ Ul>
 
<Div id = "trash" class = "ui-widget-content ui-state-default">
  <H4 class = "ui-widget-header"> <span class = "icon-ui ui-icon-śmieci"> Kosz </ span> Kosz </ h4>
</ Div>
 
</ Div>
 
 
</ Body>
</ Html>

wizualnej

Po najechaniu droppable lub gdy droppable jest aktywna (czyli akceptowalny przeciągany jest umieszczony na droppable) przy zmianie droppable wygląd. Użyj hoverClass lub activeClass opcję, aby określić klasę, odpowiednio. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI miejsce (Droppable) - wizualne sprzężenie zwrotne </ 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">
  <Style>
  #draggable, # draggable2 {width: 90px; height: 90px; padding: 0.5em; pływaka: left; margin: 10px 10px 10px 0;}
  #droppable, # droppable2 {width: 120 pikseli, wysokość: 120 pikseli; padding: 0.5em; pływaka: lewej; margin: 10px;}
  h3 {clear: left;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      hoverClass: "ui-state-hover",
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "p")
            .html ( "spadł!");
      }
    });
 
    $ ( "# Draggable2") .draggable ();
    $ ( "# Droppable2") .droppable ({
      Akceptujemy: "# draggable2"
      activeClass: "ui-state-default",
      drop: function (event, ui) {
        $ (This)
          .addClass ( "ui-state-highlight")
          .find ( "p")
            .html ( "spadł!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<H3> Po najechaniu droppable gdy sprzężenie zwrotne: </ h3>
 
<Div id = "przeciągany" class = "ui-widget-content">
  <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p>
</ Div>
 
<Div id = "droppable" class = "ui-widget-header">
  <P> Proszę wprowadzić tutaj </ p>
</ Div>
 
<H3> Po uruchomieniu Draggable zwrotne: </ h3>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p>
</ Div>
 
<Div id = "droppable2" class = "ui-widget-header">
  <P> Proszę wprowadzić tutaj </ p>
</ Div>
 
 
</ Body>
</ Html>