easyui Droppable組件實現(xiàn)放置特效

更新時間：2015年08月19日 09:41:52 投稿：hebedich

droppable和draggable有類似的地方,不過區(qū)別點在于前者著重于將元素放進某個容器中,而后者則著重于可拖拽(雖然可能一些效果兩者都可以實現(xiàn))。而且通過查看easyloader源碼可知道，droppable并不依賴于draggable。

所謂放置，就是將一個物體放入一個物體內(nèi)，當(dāng)然對于easyui來說觸發(fā)各種效果是必不可少的，同時這個組件也不會依賴于其他組件。

　　Droppable的加載方式

　　1,class 加載一直不太喜歡class方式的加載浪費一個位置，代碼一多還看著亂七八糟的。

復(fù)制代碼代碼如下:

　　2,js 加載調(diào)用

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

　　Droppable的屬性

　　　　1,accept 　　　　默認為null,確定哪些元素被接受，也就是那個元素能被放置

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

　　　　2，deisabled　　默認為false 如果為true，則禁止放置

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

　　Droppable 事件列表

　　1,onDragEnter 在被拖拽元素到放置區(qū)域內(nèi)的時候觸發(fā)

　　2,onDragOver 在被拖拽元素經(jīng)過放置區(qū)域的時候觸發(fā)

　　3,onDragLeave 在被拖拽元素離開放置區(qū)域的時候觸發(fā)

　　4,onDrop 在被拖拽元素放入到放置區(qū)的時候觸發(fā)

 onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 參數(shù)獲取DOM元素
 }

　　Droppable 方法列表

　　1，options 返回屬性對象

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

　　2,enable,disable 和上面屬性的功能是一樣的分別是啟用和禁止放置

$('#box').droppable('enable/disable')

給大家展示下官方的示例吧

<!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方式將元素設(shè)置為可draggable的
  */
  $(function(){
   $('.drag').draggable({
    proxy:'clone',
    revert:true,
    cursor:'pointer',
    onStartDrag:function(){
     $(this).draggable('options').cursor='not-allowed';//設(shè)置鼠標樣式為不可拖動
     $(this).draggable('proxy').addClass('dp');//設(shè)置樣式
    },
    onStopDrag:function(){
     $(this).draggable('options').cursor='auto';//設(shè)置鼠標
    }
   });
   //將容易置為droppable并且可接受元素
   $('#target').droppable({
    accept:'#d1,#d3',
    onDragEnter:function(e,source){//拖入
     $(source).draggable('options').cursor='auto';
     $(source).draggable('proxy').css('border','1px solid red');
     $(this).addClass('over');
    },
    onDragLeave:function(e,source){//脫離
     $(source).draggable('options').cursor='not-allowed';
     $(source).draggable('proxy').css('border','1px solid #ccc');
     $(this).removeClass('over');
    },
    onDrop:function(e,source){//放下
     $(this).append(source)
     $(this).removeClass('over');
     alert("我被放下了");
    } ,
    //onDropOver當(dāng)元素被拖出(成功放入到某個容器)的時候觸發(fā)
    onDragOver:function(e,source){
      alert("我被拖出去了");//先于alert("我被放下了");執(zhí)行,表明其觸發(fā)在onDrop之前。
   }
   });
  });
 </script>
 
</body>
</html>

運行效果圖這里就不給出了,官網(wǎng)直接就可以查看。OVER!

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

easyui 1.3.5 Droppable 就此完結(jié)。

您可能感興趣的文章: