Latest web development tutorials

jQuery UI par exemple - traînée (Draggable)

Permettre à la souris pour déplacer l'élément.

Pour plus de détails sur l'interaction draggable, consultez la documentation de l' API peut glisser et déposer widgets (le Glissable le Widget) .

La fonction par défaut

Activer fonctionnalité draggable sur tout élément DOM. En cliquant et en faisant glisser la souris dans la fenêtre pour déplacer l'objet draggable. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - 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: 150px; height: 150px; padding: 0.5em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> S'il vous plaît me traîner! </ P>
</ Div>
 
 
</ Body>
</ Html>

la

défilement automatique

le défilement automatique du document lorsque le draggable déplacé en dehors de la fenêtre. Réglez le scroll option true pour activer le défilement automatique, réglage fin, la vitesse de défilement lorsque vous faites défiler la gâchette scrollSensitivity et scrollSpeed options de réglage. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - défilement automatique </ 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, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Défilez: true});
    $ ( "# Draggable2") .draggable ({scroll: true, scrollSensitivity: 100});
    $ ( "# Draggable3") .draggable ({scroll: true, scrollSpeed: 100});
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> Scroll est définie sur true, le paramètre par défaut </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> scrollSensitivity à 100 </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-widget-content">
  <P> scrollSpeed ​​à 100 </ p>
</ Div>
 
<Style Div = "height: 5000px; largeur: 1px;"> </ div>
 
 
</ Body>
</ Html>

la

contraints mouvement

zone Draggable définie par la limite pour contraindre le mouvement de chaque déplaçables. Définir l' axis des options pour limiter chemin draggable pour l'axe x ou y-axe ou containment option pour spécifier un élément DOM parent ou un sélecteur jQuery, comme «document.». 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - mouvement contraint </ 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: 90px; hauteur: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  #draggable, # draggable2 {margin-bottom: 20px;}
  #draggable {cursor: n-resize;}
  # Draggable2 {cursor: e-resize;}
  # Containment-wrapper {width: 95%; hauteur: 150px; border: #ccc solide 2px; padding: 10px;}
  h3 {clear: left;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Axe: "y"});
    $ ( "# Draggable2") .draggable ({axe "x"});
 
    $ ( "# Draggable3") .draggable ({confinement: "# confinement-wrapper", faites défiler: false});
    $ ( "# Draggable5") .draggable ({confinement: "parent"});
  });
  </ Script>
</ Head>
<Body>
 
<H3> mouvement le long de la contrainte de l'axe: </ h3>
 
<Div id = classe "draggable" = "ui-widget-contenu draggable">
  <P> Seulement glisser vertical </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-contenu draggable">
  <P> Seulement glisser horizontal </ p>
</ Div>
 
<H3> ou un mouvement limité dans un autre élément DOM: </ h3>
<Div id = "confinement-wrapper">
  <Div id = "draggable3" class = "ui-widget-contenu draggable">
    <P> Je fus contraint dans une boîte </ p>
  </ Div>
 
  <Class Div = "ui-widget-contenu draggable">
    <P id = "draggable5" class = "ui-widget-tête"> Je suis confiné dans l'élément parent </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

la

style du curseur

Lorsque vous faites glisser l'objet pour positionner le curseur. Par défaut, le curseur est au milieu traîné objet. Utilisez cursorAt option pour indiquer la position par rapport à l'autre (spécifié par rapport à une partie supérieure de la valeur de pixel, à droite, en bas, à gauche de) de déplaçables. En fournissant une valeur CSS de curseur avec les cursor options pour personnaliser l'apparence du curseur. valeurs de curseur CSS valides sont les suivantes: par défaut, déplacer le pointeur, réticule, et ainsi de suite. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - Style du curseur </ 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, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Cursor: "bouger", cursorAt: {top: 56, à gauche: 56}});
    $ ( "# Draggable2") .draggable ({cursor: "réticule", cursorAt: {top: -5, à gauche: -5}});
    $ ( "# Draggable3") .draggable ({cursorAt: {bottom: 0}});
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> Je suis toujours au milieu (par rapport à la souris) </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Mon curseur gauche -5 et top -5 </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-widget-content">
  <P> Mon seul contrôler la position du curseur des valeurs «de fond» </ p>
</ Div>
 
 
</ Body>
</ Html>

la

départ différé

En delay retard millisecondes commencez à faire glisser les paramètres d'option. Par la distance option est enfoncé et faites glisser le curseur sur le pixel spécifié avant d' autoriser le glisser-déposer. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - départ différé </ 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: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Distance: 20});
    $ ( "# Draggable2") .draggable ({retard: 1000});
    $ ( ".ui-Draggable") .disableSelection ();
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> Seulement quand je traîne un pixel 20, et a commencé à glisser </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  Après <p> Peu importe combien la distance que vous avez à faire glisser et glisser commencé à attendre 1000ms </ p>
</ Div>
 
 
</ Body>
</ Html>

la

événement

déplaçables sur start , drag et stop les événements. Traîner le début de déclenchement start événement déclenché lors de drag drag événement, déclenché lorsque la traînée arrêt stop événement. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - Events </ 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: 16em; padding: 0 1em;}
  #draggable ul li {margin: 1em 0; padding: 0.5em 0;} * html #draggable ul li {height: 1%;}
  #draggable ul li span.ui-icon {float: left;}
  #draggable ul li span.count {font-weight: bold;}
  </ Style>
  <Script>
  $ (Function () {
    var $ start_counter = $ ( "# event-start"),
      $ Drag_counter = $ ( "# event-drag"),
      $ Stop_counter = $ ( "# event-stop"),
      Chiffres = [0, 0, 0];
 
    $ ( "#draggable") .draggable ({
      commencer: function () {
        chiffres [0] ++;
        updateCounterStatus ($ start_counter, chiffres [0]);
      },
      drag: function () {
        compte [1] ++;
        updateCounterStatus ($ drag_counter, compte [1]);
      },
      stop: function () {
        compte [2] ++;
        updateCounterStatus ($ stop_counter, chiffres [2]);
      }
    });
 
    fonctionner updateCounterStatus ($ event_counter, NEW_COUNT) {
      // Mise à jour premier état visuel ...
      if (! $ event_counter.hasClass ( "state-ui-hover")) {
        $ Event_counter.addClass ( "état ui-hover»)
          . .siblings () removeClass ( "state-ui-hover»);
      }
      // ... Ensuite, mettre à jour les numéros $ ( "span.count", $ event_counter) .text (NEW_COUNT);
    }
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget ui-widget-content">
 
  <P> S'il vous plaît me traîner, ce qui déclenche une chaîne d'événements. </ P>
 
  <Ul class = "ui-helper-reset">
    <Li id = "event-start" class = "ui-état par défaut ui-coin-all"> <span class = "ui-icon ui-icon-play"> </ span> "start" est appelée <span class = "count"> 0 </ span> x </ li>
    <Li id = "event-drag" class = "ui-état par défaut ui-coin-all"> <span class = "ui-icon ui-icon-arrow-4"> </ span> "drag" est appelé <span class = "count"> 0 </ span> x </ li>
    <Li id = "event-stop" class = "ui-état par défaut ui-coin-all"> <span class = "ui-icon ui-icon-stop"> </ span> "stop" est appelé <span class = "count"> 0 </ span> x </ li>
  </ Ul>
</ Div>
 
 
</ Body>
</ Html>

la

Poignées

Est autorisée que lorsque la partie de curseur spécifié glisser sur draggable. Utilisez la handle option pour spécifier l'élément (ou groupe d'éléments) du sélecteur jQuery pour l'objet déplacé.

Ou empêcher glisser lorsque le curseur est sur un élément spécifique (ou groupe d'éléments) dans le draggable. Utilisez l'option d'annuler pour spécifier un sélecteur jQuery sur lequel à "annuler" fonctionnalité draggable.

Ou lorsque l'élément de curseur spécifié (ou groupe d'éléments) dans la traînée autorisée draggable. Utilisez la handle option pour spécifier annuler la fonction de glisser jQuery sélecteur. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - Poignées </ 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: 0 10px 10px 0;}
  p #draggable {curseur: déplacer;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Handle: "p"});
    $ ( "# Draggable2") .draggable ({cancel: "p.ui-widget-tête"});
    $ ( "Div, p") .disableSelection ();
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P class = "ui-widget-tête"> Vous ne pouvez faire glisser et déposer dans cette gamme I </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Vous pouvez me prendre autour de glisser & hellip; </ p>
  <P class = "ui-widget-tête"> & hellip; mais vous ne pouvez pas me </ p> glisser Dans cette gamme
</ Div>
 
 
</ Body>
</ Html>

la

Restaurer l'emplacement

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 glisser (Draggable) - Restaurer Emplacement </ 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: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Revert: true});
    $ ( "# Draggable2") .draggable ({revenir: true, helper: "clone"});
  });
  </ Script>
</ Head>
<Body>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> Restaurer </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> Restaurer adjoint </ p>
</ Div>
 
 
</ Body>
</ Html>

la

Aligner sur la grille ou des éléments

Aligner les éléments frontières DOM internes ou externes déplaçables. L'utilisation de snap , snapMode (intérieure, extérieure, à la fois) et snapTolerance (lors de l' appel aligné avec la distance entre les éléments déplaçables en pixels) de l' option.

Aligner sur la grille ou déplaçables. Par grid option de taille pour définir les cellules de la grille (hauteur ou largeur pixels). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - Aligner à des éléments de la grille ou </ 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: 90px; hauteur: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em;}
  .ui-widget-tête p, .ui-widget-content p {margin: 0;}
  #snaptarget {height: 140px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Snap: true});
    $ ( "# Draggable2") .draggable ({pression: ".ui-widget-tête"});
    $ ( "# Draggable3") .draggable ({pression: ".ui-widget-tête", SNAPMODE: "externe"});
    $ ( "# Draggable4") .draggable ({grille: [20, 20]});
    $ ( "# Draggable5") .draggable ({grille: [80, 80]});
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "snaptarget" class = "ui-widget-tête">
  <P> Je suis un objectif aligné </ p>
</ Div>
 
style="clear:both"> <br
 
<Div id = classe "draggable" = "ui-widget-contenu draggable">
  <P> Par défaut (pression: true), aligné à tous les autres éléments draggable </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-contenu draggable">
  <P> Je viens aligné à la grande boîte </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-widget-contenu draggable">
  <P> Je viens aligné sur le bord extérieur de la grande boîte </ p>
</ Div>
 
<Div id = "draggable4" class = "ui-widget-contenu draggable">
  <P> I aligné à une grille de 20 x 20 </ p>
</ Div>
 
<Div id = "draggable5" class = "ui-widget-contenu draggable">
  <P> I aligné sur une grille de 80 x 80 </ p>
</ Div>
 
 
</ Body>
</ Html>

la

La rétroaction visuelle

Fournir une rétroaction à l'utilisateur, comme assistant à la façon dont les objets traîné. helper option accepte de originale '(avec le curseur des objets déplaçables), «clone» des valeurs (avec la copie draggable du curseur), ou une fonction retourne l'élément DOM (l'élément lors d' un glisser le curseur sur l'écran). Par opacity option contrôle la transparence assistant.

Pour distinguer ce qui est un draggable est traîné, laissez draggable en mouvement pour maintenir l'avant. Si vous faites glisser, en utilisant zIndex option pour régler la hauteur de la z-index assistant, ou utiliser la stack option pour vous assurer que lorsque vous arrêtez de glisser, le dernier étant traîné élément apparaît toujours au - dessus du groupe avec d' autres projets. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) - 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, # draggable3, #set div {width: 90px; hauteur: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  #draggable, # draggable2, # draggable3 {margin-bottom: 20px;}
  #set {clear: both; float: left; largeur: 368px; height: 120px;}
  p {clear: both; margin: 0; padding: 1em 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Helper: "original"});
    $ ( "# Draggable2") .draggable ({opacité: 0,7, helper: "clone"});
    $ ( "# Draggable3") .draggable ({
      curseur: "déplacer",
      cursorAt: {top: -12, à gauche: -20},
      helper: function (event) {
        return $ ( "<div class = 'ui-widget-header> Je suis un assistant personnalisé </ div>");
      }
    });
    $ ( "#set Div") .draggable ({pile: "div #set"});
  });
  </ Script>
</ Head>
<Body>
 
<Classe H3 = "docs"> helper: </ h3>
 
<Div id = classe "draggable" = "ui-widget-content">
  <P> originale </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-widget-content">
  <P> translucide clone </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-widget-content">
  <P> assistant personnalisé (en conjonction avec cursorAt) </ p>
</ Div>
 
<H3 class = "docs"> pile: </ h3>
<Div id = "set">
  <Class Div = "ui-widget-content">
    <P> Nous sommes draggables .. </ p>
  </ Div>
 
  <Class Div = "ui-widget-content">
    <P> .. il est z-index est automatiquement contrôlé .. </ p>
  </ Div>
 
  <Class Div = "ui-widget-content">
    <P> .. avec options de pile. </ P>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

la

jQuery UI Draggable + Sortable

Draggable et Sortable d'interaction transparente. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI glisser (Draggable) + Sort (Sortable) </ 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>
  ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;}
  li {margin: 5px; padding: 5px; largeur: 150px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#sortable") .sortable ({
      revenir: true
    });
    $ ( "#draggable") .draggable ({
      connectToSortable: "#sortable",
      helper: "clone",
      revenir: «invalide»
    });
    $ ( "Ul, li") .disableSelection ();
  });
  </ Script>
</ Head>
<Body>
 
<Ul>
  <Li id = classe "draggable" = "ui-state-highlight"> S'il vous plaît me traîner </ li>
</ Ul>
 
<Ul id = "sortable">
  <Li class = "ui-state-default"> Article 1 </ li>
  <Li class = "ui-state-default"> Article 2 </ li>
  <Li class = "ui-state-default"> Article 3 </ li>
  <Li class = "ui-state-default"> Article 4 </ li>
  <Li class = "ui-state-default"> Article 5 </ li>
</ Ul>
 
 
</ Body>
</ Html>

la