집 >웹 프론트엔드 >JS 튜토리얼 >easyui Droppable 구성 요소는 배치 효과를 구현합니다.

easyui Droppable 구성 요소는 배치 효과를 구현합니다.

PHPz앞으로: 2016-05-16 15:44:281235검색

Droppable과 draggable은 비슷하지만 차이점은 전자는 컨테이너에 요소를 배치하는 데 중점을 두는 반면, 후자는 드래그 가능에 중점을 둔다는 점입니다(일부 효과는 두 가지 모두에서 얻을 수 있음). 그리고 easyloader 소스 코드를 보면 droppable이 draggable에 의존하지 않는다는 것을 알 수 있습니다.

소위 배치는 개체를 개체에 넣는 것입니다. 물론, easyui가 다양한 효과를 발동시키는 것은 필수적입니다. 동시에 이 구성 요소는 다른 구성 요소에 의존하지 않습니다.

코드는 다음과 같습니다:

2,js loading call

삭제 가능한 속성

<p id=&#39;dd&#39; class="easyui-droppable" data-options="accept:&#39;#box,#pox&#39;"></p>

1 ,accept

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

기본값은 null입니다. 허용되는 요소, 즉 배치할 수 있는 요소를 결정합니다.

2, deisabled　

기본값은 false true인 경우, 금지됨 Drop

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

Droppable 이벤트 목록

　1,onDragEnter는 요소를 드롭 영역으로 드래그할 때 트리거됩니다

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
  disabled : true ,    //禁止放置
});

　2, onDragOver는 드래그된 요소가 배치 영역을 통과할 때 트리거됩니다 3. onDragLeave 드래그된 요소가 배치 영역을 벗어날 때 트리거됩니다

4. onDrop 드래그된 요소가 배치 영역에 배치될 때 트리거됩니다 트리거되면

삭제 가능한 메서드 목록

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

onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 参数获取DOM元素
 }

2, 활성화, 비활성화 및 위 속성 배치를 활성화하고 비활성화하는 기능은 동일합니다.

공식 예를 보여드리겠습니다.

console.log($(&#39;#box&#39;).droppable(&#39;options&#39;));

여기서는 작업 렌더링이 제공되지 않으며 공식 웹사이트에서 확인할 수 있습니다. 직접 사용하십시오. OVER!

$(&#39;#box&#39;).droppable(&#39;enable/disable&#39;)

효과 주소:

http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Accept a Drop - 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>
</head>
<body>
 <div style="margin:20px 0;"></div>
 <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drag me!
  <div id="d1" class="drag">Drag 1</div>
  <div id="d2" class="drag">Drag 2</div>
  <div id="d3" class="drag">Drag 3</div>
 </div> 
 <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drop here!
 </div>
 <div style="clear:both"></div>
 <style type="text/css">
  .drag{
   width:100px;
   height:50px;
   padding:10px;
   margin:5px;
   border:1px solid #ccc;
   background:#AACCFF;
  }
  .dp{
   opacity:0.5;
   filter:alpha(opacity=50);
  }
  .over{
   background:#FBEC88;
  }
 </style>
 <script>
  /**
  使用js方式将元素设置为可draggable的
  */
  $(function(){
   $(&#39;.drag&#39;).draggable({
    proxy:&#39;clone&#39;,
    revert:true,
    cursor:&#39;pointer&#39;,
    onStartDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;//设置鼠标样式为不可拖动
     $(this).draggable(&#39;proxy&#39;).addClass(&#39;dp&#39;);//设置样式
    },
    onStopDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;//设置鼠标
    }
   });
   //将容易置为droppable并且可接受元素
   $(&#39;#target&#39;).droppable({
    accept:&#39;#d1,#d3&#39;,
    onDragEnter:function(e,source){//拖入
     $(source).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid red&#39;);
     $(this).addClass(&#39;over&#39;);
    },
    onDragLeave:function(e,source){//脱离
     $(source).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid #ccc&#39;);
     $(this).removeClass(&#39;over&#39;);
    },
    onDrop:function(e,source){//放下
     $(this).append(source)
     $(this).removeClass(&#39;over&#39;);
     alert("我被放下了");
    } ,
    //onDropOver当元素被拖出(成功放入到某个容器)的时候触发
    onDragOver:function(e,source){
      alert("我被拖出去了");//先于alert("我被放下了");执行,表明其触发在onDrop之前。
   }
   });
  });
 </script>
  
</body>
</html>

위 이것이 이 장의 모든 내용입니다. 더 많은 관련 튜토리얼을 보려면

jQuery 비디오 튜토리얼

, jQuery EasyUI 비디오 튜토리얼을 방문하세요.

성명：

이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：JS DIV CSS는 양식과 유사한 드롭다운 목록 effect_javascript 기술을 구현합니다.다음 기사：JS DIV CSS는 양식과 유사한 드롭다운 목록 effect_javascript 기술을 구현합니다.

easyui Droppable 구성 요소는 배치 효과를 구현합니다.

관련 기사