李炎恢_PHP_jQuery EasyUI[004] ~ 使用JS 指定HTML標籤(Tag)變成EasyUI(拖拉)元件(屬性/事件 設定) + 改變特定HTML標籤(Tag)的 CSS值 藉此改變顏色
李炎恢_PHP_jQuery EasyUI[004] ~ 使用JS 指定HTML標籤(Tag)變成EasyUI(拖拉)元件(屬性/事件 設定) + 改變特定HTML標籤(Tag)的 CSS值 藉此改變顏色
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$.fn.droppable.defaults.disabled = true;
$('#dd').droppable({
accept : '#box',
disabled : false,
onDragEnter : function (e, source) {
//console.log(source);
$(this).css('background', 'blue');
//alert('enter');
},
onDragOver : function (e, source) {
//console.log(source);
$(this).css('background', 'orange');
//alert('over');
},
onDragLeave : function (e, source) {
//console.log(source);
$(this).css('background', 'green');
//alert('over');
},
onDrop : function (e, source) {
//console.log(source);
$(this).css('background', 'maroon');
//alert('over');
},
//onDragEnter只触发一次，而Over会在不停的拖动中不停触发
//onDrop是放入到放置区，松开鼠标左键，丢下的操作
});
//console.log($('#dd').droppable('options'));
//$('#dd').droppable('disable');
//$('#dd').droppable('enable');
$('#box').draggable({
});
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body> <div id="dd" style="width:600px;height:400px;background:black"></div> <div id="box" style="width:100px;height:100px;background:#ccc;"> <span id="pox">内容部分</span> </div> </body> </html>
PDF:
執行結果:
