Latest web development tutorials

jQuery UI par exemple - lieu (Déposable)

Widgets qui peuvent être glissés pour créer la cible.

Pour plus de détails sur l'interaction largable, consultez la documentation de l' API peut être placé de petites pièces (Déposable le Widget) .

La fonction par défaut

Activation de la fonction largable sur un élément DOM, et peut faire glisser des widgets pour créer la cible. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - La fonction par défaut </ 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; float: left; margin: 10px 10px 10px 0;}
  #droppable {width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "p")
            .html ( "Dépouillé!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> S'il vous plaît envoyez-moi traîné à l'endroit cible! </ P>
</ Div>
 
<Div id = classe "largables" = "ui-widget-tête">
  <P> Garder hors d'ici! </ P>
</ Div>
 
 
</ Body>
</ Html>

la

accepté

Utilisez accept des options de ciblage élément largable qui accepte (ou groupe d'éléments). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - accepté </ 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; float: left; margin: 10px;}
  #draggable, # draggable-non valide {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable, # Draggable-non valide") .draggable ();
    $ ( "#droppable") .droppable ({
      accepter: "#draggable",
      activeClass: "state-ui-hover",
      hoverclass: "ui-state-actif»,
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "p")
            .html ( "Dépouillé!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable-non valide" = "ui-widget-content">
  <P> Je ne peux pas être placé draggable </ p>
</ Div>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> S'il vous plaît me traîner à la destination </ p>
</ Div>
 
<Div id = classe "largables" = "ui-widget-tête">
  <P> accepter: '#draggable' </ p>
</ Div>
 
 
</ Body>
</ Html>

la

Prévenir la propagation

Lorsque vous utilisez largable imbriquée - par exemple, vous pouvez avoir une structure de répertoire arbre modifiable avec des dossiers et des noeuds de documents - greedy option est réglée sur vrai lorsque le draggable pour éviter d' être placés sur les nœuds enfants (largable) lorsque la propagation de l'événement. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - prévenir la propagation </ 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; hauteur: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;}
  #droppable, # droppable2 {width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px;}
  # Déposable-intérieure, # droppable2-inner {width: 170px; hauteur: 60px; padding: 0.5em; float: left; margin: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
 
    $ ( "#droppable, # Déposable-intérieur") .droppable ({
      activeClass: "state-ui-hover",
      hoverclass: "ui-state-actif»,
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "> p")
            .html ( "Dépouillé!");
        return false;
      }
    });
 
    $ ( "# Droppable2, # droppable2-intérieur") .droppable ({
      gourmande: true,
      activeClass: "state-ui-hover",
      hoverclass: "ui-state-actif»,
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "> p")
            .html ( "Dépouillé!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> S'il vous plaît me traîner à la destination </ p>
</ Div>
 
<Div id = classe "largables" = "ui-widget-tête">
  <P> largable externe </ p>
  <Div id = class "largable-intérieure" = "ui-widget-tête">
    <P> largable interne (sans gourmand) </ p>
  </ Div>
</ Div>
 
<Div id = "droppable2" class = "ui-widget-tête">
  <P> largable externe </ p>
  <Div id = classe "droppable2-intérieure" = "ui-widget-tête">
    <P> largable interne (avec gourmand) </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

la

Restaurer l'emplacement draggable

Comme avec les valeurs booléennes revert lorsque l' option draggable pour arrêter le déplacement, le retour draggable (ou son assistant) à l'emplacement d' origine. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - réduction de la position 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">
  <Style>
  #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: left; margin: 10px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Revert: "valide"});
    $ ( "# Draggable2") .draggable ({revenir: "invalide"});
 
    $ ( "#droppable") .droppable ({
      activeClass: "ui-état par défaut",
      hoverclass: "state-ui-hover",
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "p")
            .html ( "placé!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> réduction lorsqu'il est placé sur la cible </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Lorsque la réduction ne soit pas placé sur la cible </ p>
</ Div>
 
<Div id = classe "largables" = "ui-widget-tête">
  <P> S'il vous plaît mettez ici </ p>
</ Div>
 
 
</ Body>
</ Html>

la

Panier Demo

Démontre comment utiliser le panneau de pliage pour afficher produit structure de répertoire, utiliser le glisser-déposer pour ajouter des produits au panier, panier produits sont triables. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - Panier 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; largeur: 500px; margin-right: 2em;}
  #cart {width: 200px; float: left; margin-top: 1em;}
  / * Définir la liste des styles pour maximiser largable * /
  #cart ol {margin: 0; padding: 1em 0 1em 3em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#catalog") .Accordion ();
    $ ( "#catalog Li") .draggable ({
      appendTo: «corps»,
      helper: "clone"
    });
    $ ( "#cart Ol") .droppable ({
      activeClass: "ui-état par défaut",
      hoverclass: "state-ui-hover",
      accepter: ": non (.ui-sortable-helper)",
      drop: function (event, ui) {
        $ (Ce) .Find ( ".placeholder") .remove ();
        $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (this);
      }
    }). Sortable ({
      articles: "li: non (.placeholder)",
      tri: function () {
        // Obtenir l'interaction du largable avec sortable entrée ajoutée // utiliser connectWithSortable peut résoudre ce problème, mais ne vous permet pas de personnaliser l'actif / hoverclass l'option $ (this) .removeClass ( "ui-état par défaut");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<div id = "produits">
  <Classe H1 = "ui-widget-tête"> Produits </ h1>
  <Div id = "catalogue">
    <H2> <a href="#"> T-shirts </a> </ h2>
    <Div>
      <Ul>
        <Li> Lolcat Shirt </ li>
        <Li> Cheezeburger Shirt </ li>
        <Li> Buckit Shirt </ li>
      </ Ul>
    </ Div>
    <H2> <a href="#"> Sacs </a> </ h2>
    <Div>
      <Ul>
        <Li> Zebra Striped </ li>
        <Li> Cuir Noir </ li>
        <Li> Cuir Alligator </ 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 = "panier">
  <Classe H1 = "ui-widget-tête"> panier </ h1>
  <Class Div = "ui-widget-content">
    <Ol>
      <Li class = "espace réservé"> ajouter des produits ici </ li>
    </ Ol>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

la

Simple Photo Manager

Vous pouvez glisser et déposer des photos dans la Corbeille ou cliquez sur l'icône de corbeille pour supprimer les photos.

Vous pouvez glisser et déposer des photos dans des albums ou cliquez sur l'icône de recyclage pour restaurer les photos.

Vous pouvez zoomer en cliquant sur l'icône pour afficher une image plus grande. jQuery UI Dialog (dialogue) des moyens pour fenêtre modale. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - simple gestionnaire de photo </ 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; largeur: 65%; min-height: 12em;}
  .gallery.custom état actif {background: #EEE;}
  .gallery li {float: left; largeur: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;}
  .gallery li h5 {margin: 0 0 0.4em; curseur: déplacer;}
  .gallery li a {float: right;}
  .gallery li a.ui-icon-zoomin {float: left;}
  .gallery li img {width: 100%; curseur: déplacer;}
 
  #trash {float: right; largeur: 32%; min-height: 18em; padding: 1%;}
  h4 #trash {line-height: 16px; margin: 0 0 0.4em;}
  #trash h4 .ui-icon {float: left;}
  #trash .gallery h5 {display: none;}
  </ Style>
  <Script>
  $ (Function () {
    // Ceci est un album et poubelle var $ galerie = $ ( "#gallery"),
      $ Trash = $ ( "#trash");
 
    // Faire l'album entrée draggable $ ( "li", galerie $) .draggable ({
      annuler: "a.ui-icon", // cliquer sur une icône ne démarre pas glisser revenir: «invalide», // Lorsque unplaced, l'entrée revient à son confinement de position initiale: «document»,
      helper: "clone",
      curseur: "déplacer"
    });
 
    // Laissez la poubelle peut être placé, a accepté la trash.droppable album entrée $ ({
      accepter: "#gallery> li",
      activeClass: "state-ui-highlight",
      drop: function (event, ui) {
        Supprimer photo (ui.draggable);
      }
    });
 
    // Faire un album peut être placé, a accepté la Corbeille entrée $ gallery.droppable ({
      accepter: "li #trash",
      activeClass: "custom-state-actif»,
      drop: function (event, ui) {
        recycleImage (ui.draggable);
      }
    });
 
    // Suppression de l'image fonction var recycle_icon = "<a href = 'lien / vers / recyclage / script / quand / nous / avez / js / off' title = 'image restaurée' class = 'ui-icon ui-icon-refresh' > restaurer l'image </a> ";
    fonction Supprimer photo ($ item) {
      $ Item.fadeOut (function () {
        var $ list = $ ( "ul", $ poubelle) .length?
          $ ( "Ul", $ poubelle):
          $ ( "<Ul class = 'galerie ui-helper-reset' />") .appendTo ($ poubelle);
 
        $ Item.find ( "a.ui-icon-poubelle") .remove ();
        $ Item.append (recycle_icon) .appendTo (liste de $) .fadeIn (function () {
          $ Item
            .animate ({width: "48px"})
            .Find ( "img")
              .animate ({height: "36px"});
        });
      });
    }
 
    // Image Restore var trash_icon = "<a href = 'lien / vers / trash / script / quand / nous / avez / js / off' title = 'Supprimer l'image' class = 'ui-icon ui-icon-trash" > supprimer l'image </a> ";
    fonction recycleImage ($ item) {
      $ Item.fadeOut (function () {
        $ Item
          .Find ( "a.ui-icon-refresh")
            .remove ()
          .end ()
          Css ( "largeur", "96px")
          .append (trash_icon)
          .Find ( "img")
            Css ( "hauteur", "72px")
          .end ()
          .appendTo (Galerie de $)
          .fadeIn ();
      });
    }
 
    // Aperçu de l'image caractéristique, Démos ui.dialog utilisé comme une fonction de fenêtre modale viewLargerImage ($ link) {
      var src = $ link.attr ( "href"),
        title = $ link.siblings ( "img") .attr ( "alt"),
        $ Modal = $ ( "img [src $ = '" + src + "']");
 
      if ($ modal.length) {
        $ Modal.dialog ( «ouvert»);
      } Else {
        var img = $ ( "<img alt =" "+ titre +" '= largeur' 384 'height = style' 288 '=' display: none; padding: 8px; '/> ")
          .attr ( "src", src) .appendTo ( «corps»);
        setTimeout (function () {
          img.dialog ({
            Titre: titre,
            largeur: 400,
            modal: true
          });
        }, 1);
      }
    }
 
    // Proxy résoudre icône comportement $ ( "ul.gallery> li") à travers (function (l'événement de l'événement) {
      var $ item = $ (this),
        $ Cible = $ (event.target);
 
      if (target.is $ ( "a.ui-icon-poubelle")) {
        Supprimer photo ($ item);
      } Else if (target.is $ ( "a.ui-icon-zoomin")) {
        viewLargerImage ($ cible);
      } Else if (target.is $ ( "a.ui-icon-refresh")) {
        recycleImage ($ item);
      }
 
      return false;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget ui-helper-clearfix">
 
<Ul id = classe "galerie" = "galerie ui-helper-reset ui-helper-clearfix">
  <Class = Li "ui-widget-content ui-coin-tr">
    <Class = H5 "ui-widget-tête"> High Tatras </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "High Tatras pic" width = hauteur "96" = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Agrandir </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> supprimer des images </a>
  </ Li>
  <Class = Li "ui-widget-content ui-coin-tr">
    <Class = H5 "ui-widget-tête"> High Tatras 2 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Lake Mountain Cabin" width = hauteur "96" = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Agrandir </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> supprimer des images </a>
  </ Li>
  <Class = Li "ui-widget-content ui-coin-tr">
    <Class = H5 "ui-widget-tête"> High Tatras 3 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Plan d'escalade" width = hauteur "96" = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Agrandir </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> supprimer des images </a>
  </ Li>
  <Class = Li "ui-widget-content ui-coin-tr">
    <Class = H5 "ui-widget-tête"> High Tatras 4 </ h5>
    <Img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "au sommet de Kozi Kopka" width = hauteur "96" = "72">
    <a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Agrandir </a>
    <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> supprimer des images </a>
  </ Li>
</ Ul>
 
<Div id = "trash" class = "ui-widget-contenu ui-state-default">
  <Class H4 = "ui-widget-tête"> <span class = "ui-icon ui-icon-poubelle"> Corbeille </ span> Corbeille </ h4>
</ Div>
 
</ Div>
 
 
</ Body>
</ Html>

la

La rétroaction visuelle

Lorsque vous survolez largable, ou lorsque largable est activé (ie, un draggable acceptable est placé sur le largable) lors du changement de l'apparence largable. Utilisez hoverClass ou activeClass option pour spécifier la classe, respectivement. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI lieu (Déposable) - rétroaction visuelle </ 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; hauteur: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;}
  #droppable, # droppable2 {width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px;}
  h3 {clear: left;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
    $ ( "#droppable") .droppable ({
      hoverclass: "state-ui-hover",
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "p")
            .html ( "Dépouillé!");
      }
    });
 
    $ ( "# Draggable2") .draggable ();
    $ ( "# Droppable2") .droppable ({
      accepter: "# draggable2",
      activeClass: "ui-état par défaut",
      drop: function (event, ui) {
        $ (Ce)
          .addClass ( "état ui-highlight")
          .Find ( "p")
            .html ( "Dépouillé!");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<H3> Lorsque vous survolez largable lorsque le retour: </ h3>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> S'il vous plaît me traîner à la destination </ p>
</ Div>
 
<Div id = classe "largables" = "ui-widget-tête">
  <P> S'il vous plaît mettez ici </ p>
</ Div>
 
<H3> Lorsqu'il est activé rétroaction draggable: </ h3>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> S'il vous plaît me traîner à la destination </ p>
</ Div>
 
<Div id = "droppable2" class = "ui-widget-tête">
  <P> S'il vous plaît mettez ici </ p>
</ Div>
 
 
</ Body>
</ Html>

la