Die ziehbare EasyUI-Komponente implementiert Drag Effect_JQuery

Als UI-Plug-in, das JQusey kapselt, ist easyui eigentlich recht einfach zu verwenden, zumindest spart es einem Mistkerl wie mir viel Zeit.

Draggable kann auf zwei Arten geladen werden:

1, geladen durch die Klasse, wie folgt:

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

Laden über JS wie folgt:

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

Es ist zu beachten, dass die beiden oben genannten Punkte sowohl „easyui-dragable“ als auch „draggable“ sind. Sie alle erzielen den jQuery-Effekt durch Aufrufen von Funktionen, die von easyui geschrieben wurden.

Dragbare Eigenschaften:

zurücksetzen Wenn der Wert wahr ist, kehrt er an die Ausgangsposition zurück, wenn das Ziehen stoppt, und Sie können überall hin ziehen.

zurücksetzen: boolean,

Achse Begrenzen Sie die Richtung des Ziehens, horizontal „h“? vertikales 'v'? Dies ist in Kombination mit „Zurücksetzen“ interessanter. Stellen Sie die Ziehrichtung auf

ein

Wenn es vertikal ist, ist es dasselbe wie erfrischende Nachrichten auf WeChat und Weibo.

Achse: String/'v'/'h',

Proxy-Klonen bedeutet, dass das zu ziehende Objekt beim Ziehen unverändert bleibt und dann natürlich ein zu ziehendes Objekt mit der Maus kopiert wird

Es kann etwas anderes sein, es kann eine Funktion auslösen.

Proxy: null/String/Funktion,
Dann gibt es noch viele andere Attribute, die ich nicht besonders interessant finde.

cursor: move/String, // Geben Sie den CSS-Stil des Zeigers beim Ziehen an, um ihn schön zu gestalten
deltaX: null/Zahl,
deltaY: null/number, // Das gezogene Element entspricht x, y der aktuellen Cursorposition, was einem Abstand
zwischen dem gezogenen Element und dem Cursor entspricht. handle: null/selector //Der Handle zum Starten des Ziehens Handle! Sie können nur mit dem Griff ziehen! Ja!
deaktiviert: boolean //Wenn auf true gesetzt, kann das aktuell gebundene Element nicht gezogen werden
Kante: Zahl                            // Die Breite des Containers, die darin gezogen werden kann. Von oben, unten, links und rechts im Container gezählt, ist es wie ein Rechteck innerhalb eines Rechtecks, und dann kann das darin enthaltene Element nur dann gezogen werden, wenn die Maus wird auf dem inneren Rechteck platziert

Beispiel:

$('#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('呵呵哒！');
  }
});

Schiebbare Ereignisse:

onBeforeDrag wird vor dem Ziehen ausgelöst. Durch die Rückgabe von false wird das Ziehen abgebrochen

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

onStartDrag wird beim Ziehen

ausgelöst

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

onDrag wird während des Ziehvorgangs ausgelöst und gibt false zurück, wenn das Ziehen nicht möglich ist

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

onDrag wird ausgelöst, wenn das Ziehen gestoppt wird

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

Schiebbare Methodenliste

Optionen geben Attributobjekt zurück

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

Proxy Wenn das Proxy-Attribut festgelegt ist, wird das Drag-Proxy-Element

zurückgegeben

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

aktivieren kann gezogen werden

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

Deaktivieren verhindert das Ziehen

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

Sehen wir uns ein einfaches Beispiel an

<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>
 
 

Das Obige sind fast alle Eigenschaften, Ereignisse, Methoden und Beispiele von Easyui 1.2.5 Draggable. Wenn etwas nicht stimmt, kommentieren, diskutieren und unterrichten Sie uns bitte gemeinsam.