JQuery EasyUI---Droppable( 放置)

時間 2019-12-11

標籤 jquery easyui droppable 放置欄目 JQuery 简体版

原文原文鏈接

學習要點：

1.加載方式
2.屬性列表
3.事件列表
4.方法列表javascript

本節重點了解 EasyUI 中 Droppable(放置)組件的使用方法，所謂放置，就將一個物體入某一個物體內觸發各類效果，這個組件不依賴於其餘組件css

一．加載方式

　　加載方式的其它組件是同樣的，均可以使用Class加載和JS加載html

class加載方式java

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div id="dd" style="width:600px;height:400px;background:black"></div>
</body>
</html>

JS加載jquery

$('#box').draggable({

});

參數是對象類型學習

二．屬性列表

Draggable 組件共有二個屬性，分別是：accept和disabledui

//屬性設置
$('#dd').droppable({
    accept : '#box',//selector  選擇器的名稱，能夠ID選擇器，也能夠是class選擇器  默認爲 null，肯定哪些元素被接收
    disabled : true,//boolean  布爾值  默認爲 false，若是爲 true，則禁止放置
});

三．事件列表

Droppable組件一共有四個事件，分別是：onDragEnter、onDragOver、onDragLeave、onDrop。this

PS：source 參數獲取 DOM 元素。spa

$('#dd').droppable({
     accept : '#box',
     onDragOver : function (e, source) { //參數是e,source  被拖拽元素通過放置區的時候觸發
        $(this).css('background', 'blue');
     },
     onDragEnter : function (e, source) {//參數是e,source 在被拖拽元素到放置區內的時候觸發
         $(this).css('background', 'orange');
     },
     onDragLeave : function (e, source) {//e,source 在被拖拽元素離開放置區的時候觸發
         $(this).css('background', 'green');
     },
     onDrop : function (e, source) {//e,source 在被拖拽元素放入到放置區的時候觸發
        $(this).css('background', 'maroon');
   },
});

四．方法列表

Droggable 方法 code

options方法，值是none；說明返回屬性對象
enable 方法，值是none；說明啓用放置功能
disable 方法，值是none；說明禁用放置功能

//返回屬性對象
console.log($('#box').droggable('options'));
//禁止放置
$('#box').draggable('disable');
//啓用放置
$('#box').draggable('enable');

$.fn.droppable.defaults.disabled = true;

PS：咱們能夠使用$.fn.droppable.defaults 重寫默認值對象。  重寫對象比較推薦放在代碼的前面

本節全部代碼以下所示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>jQuery Easy UI</title>
 5 <meta charset="UTF-8" />
 6 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 7 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 8 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
 9 <script type="text/javascript" src="js/index.js"></script>
10 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
11 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
12 </head>
13 <body>
14 <div id="dd" style="width:600px;height:400px;background:black"></div>
15 <div id="box" style="width:100px;height:100px;background:#ccc;">
16     <span id="pox">內容部分</span>
17 </div>
18 </body>
19 </html>

JS代碼

 1 $(function () {
 2     $.fn.droppable.defaults.disabled = true;
 3     $('#dd').droppable({
 4         accept : '#box',
 5         disabled : false,
 6         onDragEnter : function (e, source) {
 7             //console.log(source);
 8             $(this).css('background', 'blue');
 9             //alert('enter');
10         },
11         onDragOver : function (e, source) {
12             //console.log(source);
13             $(this).css('background', 'orange');
14             //alert('over');
15         },
16         onDragLeave : function (e, source) {
17             //console.log(source);
18             $(this).css('background', 'green');
19             //alert('over');
20         },
21         onDrop : function (e, source) {
22             //console.log(source);
23             $(this).css('background', 'maroon');
24             //alert('over');
25         },
26         //onDragEnter只觸發一次，而Over會在不停的拖動中不停觸發
27         //onDrop是放入到放置區，鬆開鼠標左鍵，丟下的操做
28     });
29     
30     //console.log($('#dd').droppable('options'));
31     
32     //$('#dd').droppable('disable');
33     //$('#dd').droppable('enable');
34     $('#box').draggable({
35 
36     });
37     
38 });