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.