easyui Droppable component implements placement effects-JS Tutorial-php.cn

easyui Droppable component implements placement effects

PHPz

Release： 2018-09-29 11:05:08

forward

1157 people have browsed it

Droppable and draggable are similar, but the difference is that the former focuses on placing elements into a container, while the latter focuses on being draggable (although some effects may be achieved by both). And by looking at the easyloader source code, we can know that droppable does not depend on draggable.

The so-called placement is to put an object into an object. Of course, it is essential for easyui to trigger various effects. At the same time, this component will not depend on other components.

Droppable loading method

1, class loading I have never liked the class method of loading. It wastes a position and looks messy when there are too many codes.

The code is as follows:

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

Copy after login

2,js loading call

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

Copy after login

Droppable attributes

1,accept

Default is null, determine which elements are accepted, that is, which element can be placed

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

Copy after login

2, deisabled　

Default is false If true, it is prohibited Drop

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

Copy after login

Droppable event list

　1,onDragEnter is triggered when the element is dragged into the drop area

　2,onDragOver is Triggered when the dragged element passes through the placement area

3. onDragLeave Triggered when the dragged element leaves the placement area

4. onDrop Triggered when the dragged element is placed into the placement area When triggered

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

Copy after login

Droppable method list

1, options returns attribute object

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

Copy after login

2, enable, disable and the above attributes The functions are the same, which are to enable and disable placement

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

Copy after login

Let me show you the official example

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

Copy after login

The operation renderings are not given here, the official website can be used directly Check. OVER!

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

Above That’s all the content of this chapter. For more related tutorials, please visit jQuery Video Tutorial, jQuery EasyUI Video Tutorial!