easyui Draggable 구성 요소는 drag effect_jquery를 구현합니다.

JQusey를 캡슐화하는 UI 플러그인인 easyui는 실제로 사용하기 매우 쉽습니다. 적어도 저 같은 쓰레기는 시간을 많이 절약할 수 있습니다.

Draggable은 두 가지 방법으로 로드할 수 있습니다.

1, 다음과 같이 클래스를 통해 로드됩니다.

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

다음과 같이 JS를 통해 로드합니다.

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

위의 두 가지 점은 'easyui-draggable'과 draggable이 모두 고정되어 있다는 점입니다. easyui가 작성한 함수를 호출하여 jQuery 효과를 얻습니다.

드래그 가능한 속성:

revert 값이 true인 경우 드래그가 중지되면 시작 위치로 돌아가며, 어디든 드래그할 수 있습니다.

되돌리기: 부울,

축 드래그 방향을 제한, 가로 'h'? 세로 'v'? 되돌리기와 결합하면 더 흥미로워집니다. 드래그 방향을

으로 설정하세요.

세로형이라면 위챗이나 웨이보의 새로고침 메시지와 같습니다.

축 : 문자열/'v'/'h',

프록시 복제란 드래그할 개체를 드래그할 때 변경되지 않은 상태로 유지한 다음 마우스로 드래그할 개체를 복사하는 것을 의미합니다. 물론

다른 것일 수도 있고 기능을 실행할 수도 있습니다.

프록시: null/문자열/함수,
그리고 특별히 흥미롭지 않은 다른 속성도 많이 있습니다.

cursor: move/String, //드래그할 때 포인터의 CSS 스타일을 지정하면 아름답게 됩니다
deltaX : null/숫자,
deltaY: null/number, //드래그된 요소는 현재 커서 위치의 x, y에 해당하며, 이는 드래그된 요소와 커서 사이의 거리
입니다. handler: null/selector //드래그를 시작할 핸들입니다. Handle! 핸들로만 드래그할 수 있습니다! 예!
비활성화 : 부울 //true로 설정하면 현재 바인딩된 요소를 드래그할 수 없습니다
edge: 숫자                           //그 안에서 드래그할 수 있는 컨테이너의 너비 컨테이너의 상하좌우에서 세어 직사각형 안의 직사각형과 같으며, 그 안에 있는 요소는 다음 경우에만 드래그할 수 있습니다. 마우스는 내부 직사각형에 위치합니다

예:

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

드래그 가능한 이벤트:

onBeforeDrag는 드래그 전에 트리거되며, false를 반환하면 드래그가 취소됩니다.

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

드래그할 때 onStartDrag가 실행됩니다.

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

드래그 프로세스 중에 onDrag가 실행되고 드래그가 불가능하면 false를 반환합니다

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

드래그가 중지되면 onDrag가 트리거됩니다.

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

드래그 가능한 메소드 목록

옵션은 속성 객체를 반환합니다

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

프록시 프록시 속성이 설정된 경우 드래그 프록시 요소를 반환합니다.

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

활성화를 드래그할 수 있습니다

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

비활성화는 드래그를 금지합니다

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

간단한 예를 살펴보겠습니다

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

위 내용은 Easyui 1.2.5 Draggable의 거의 모든 속성, 이벤트, 메소드 및 예제입니다. 잘못된 부분이 있으면 댓글로 토론하고 함께 가르쳐주세요.