easyui Draggable component implements drag effect_jquery

As a UI plug-in that encapsulates JQusey, easyui is actually quite easy to use, at least it saves a scumbag like me a lot of time.

Draggable can be loaded in two ways:

1, loaded through class, as follows:

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

Loading via JS, as follows:

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

It should be noted that the above two points are that both 'easyui-draggable' and draggable are fixed. They all achieve the jQuery effect by calling functions that have been written by easyui.

Draggable properties:

revert When the value is true, it will return to the starting position when dragging stops, and you can drag everywhere.

revert : boolean,

axis Limit the direction of dragging, horizontal 'h'? vertical 'v'? This is more interesting when combined with revert. Set the drag direction to

If it is vertical, it is the same as refreshing messages on WeChat and Weibo.

axis : String/'v'/'h',

Proxy Cloning means that the object to be dragged remains unchanged when dragging, and then copies an object to be dragged on the mouse, of course

It can be something else, it can trigger a function.

proxy : null/String/function,
Then there are many other attributes, which I don’t think are particularly interesting.

cursor: move/String, //Specify the CSS style of the pointer when dragging to become beautiful
deltaX : null/number,
deltaY: null/number, //The dragged element corresponds to the x, y of the current cursor position, which is a distance
between the dragged element and the cursor. handle: null/selector //The handle to start dragging Handle! You can only drag with the handle! Yes!
disabled : boolean //If set to true, the currently bound element cannot be dragged
edge: number                            //The width of the container that can be dragged within it Counted from the top, bottom, left, and right of the container, it is like a rectangle inside a rectangle, and then the element inside can only be dragged when the mouse is placed on the inner rectangle

Example:

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

Draggable events:

onBeforeDrag is triggered before dragging, returning false will cancel the drag

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

onStartDrag triggered when dragging

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

onDrag is triggered during the dragging process, and returns false if dragging is not possible

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

onDrag is triggered when dragging is stopped

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

Draggable method list

Options return attribute object

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

proxy If the proxy attribute is set, return the drag proxy element

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

enable can be dragged

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

Disable prohibits being dragged

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

Let’s take a look at a simple example

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

The above is almost all the properties, events, methods and examples of Easyui 1.2.5 Draggable. If there is anything wrong, please comment, discuss and teach us together.