Le composant easyui Draggable implémente drag effect_jquery

En tant que plug-in d'interface utilisateur qui encapsule JQusey, easyui est en fait assez facile à utiliser, au moins cela fait gagner beaucoup de temps à un salaud comme moi.

Draggable peut être chargé de deux manières :

1, chargé via la classe, comme suit :

<div id="box" class="easyui-draggable"></div>

Chargement via JS, comme suit :

$('#box').draggable();

Il convient de noter que les deux points ci-dessus sont que 'easyui-draggable' et draggable sont tous deux corrigés. Ils obtiennent tous l'effet jQuery en appelant des fonctions qui ont été écrites par easyui.

Propriétés déplaçables :

revert Lorsque la valeur est vraie, elle reviendra à la position de départ lorsque le glissement s'arrêtera et vous pourrez faire glisser n'importe où.

revert : booléen,

axe Limiter la direction de déplacement, horizontal 'h' ? « v » vertical ? Ceci est plus intéressant lorsqu'il est combiné avec Revert. Définissez la direction du glisser sur

S'il est vertical, c'est la même chose que des messages rafraîchissants sur WeChat et Weibo.

axe : Chaîne/'v'/'h',

Le clonage proxy signifie que l'objet à glisser reste inchangé lors du déplacement, puis copie bien sûr un objet à glisser sur la souris

Ça peut être autre chose, ça peut déclencher une fonction.

proxy : null/String/function,
Ensuite, il y a bien d’autres attributs, qui ne me semblent pas particulièrement intéressants.

cursor: move/String, //Spécifiez le style CSS du pointeur lors du glisser pour devenir beau
deltaX : nul/nombre,
deltaY : null/number, //L'élément déplacé correspond au x, y de la position actuelle du curseur, qui est une distance
entre l'élément déplacé et le curseur. handle: null/selector //Le handle pour commencer à faire glisser Handle! Vous ne pouvez faire glisser qu'avec la poignée ! Oui!
désactivé : booléen //Si défini sur true, l'élément actuellement lié ne peut pas être déplacé
edge: number                           //La largeur du conteneur qui peut être déplacé à l'intérieur. Compté à partir du haut, du bas, de la gauche et de la droite du conteneur, c'est comme un rectangle à l'intérieur d'un rectangle, et l'élément à l'intérieur ne peut être déplacé que lorsque la souris se pose sur le rectangle intérieur

Exemple :

$('#box').draggable({
  revert : true,
  cursor: 'text',
  handle : '#pox',
  disabled : false,
  edge : 50,
  axis :'v',
  proxy : 'clone',
  deltaX: 10,
  deltaY : 10,
  proxy: function(source){
    console.log('呵呵哒！');
  }
});

Événements déplaçables :

onBeforeDrag est déclenché avant le glisser, renvoyer false annulera le glisser

onBeforeDrag : function (e){
  alert('拖动之前触发');
  return false;
}

onStartDrag déclenché lors du glisser

onStartDrag : function(e){
  alert('拖动时触发');
}

onDrag est déclenché pendant le processus de glisser et renvoie false si le glisser n'est pas possible

onDrag : function(e){
  alert('拖动过程触发');
}

onDrag est déclenché lorsque le glisser est arrêté

onStopDrag : function (e){
  alert('在拖动停止时触发');
}

Liste de méthodes déplaçables

Les options renvoient un objet d'attribut

console.log($('#box').draggable('options'));

proxy Si l'attribut proxy est défini, renvoie l'élément proxy glisser

console.log($('#box').draggable('proxy'));

l'activation peut être glissée

$('#box').draggable('enable');

Désactiver interdit d'être déplacé

$('#box').draggable('disable');

Jetons un coup d'œil à un exemple simple

<pre class="brush:java;">html>
 
 
 
  <meta charset="UTF-8">
  <title>Basic Draggable - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
 
 
 
  <h2>Basic Draggable</h2>
  <p>Move the boxes below by clicking on it with mouse.</p>
  <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
  </div>
  <script>
    $(function () {
 
      $("#title").draggable({
        proxy: function (a) {
          var a = $('<div class="proxy_div">你拖我干啥</div>');
          a.appendTo('body');
          return a;
        },
        cursor: 'pointer',
        edge: '6'
      });
    });
  </script>
 
 

Ce qui précède contient presque toutes les propriétés, événements, méthodes et exemples d'Easyui 1.2.5 Draggable. S'il y a quelque chose qui ne va pas, veuillez commenter, discuter et nous apprendre ensemble.