jQuery Easy UI Droppable(放置)组件

来源：互联网发布：外卖消费人群数据分析编辑：程序博客网时间：2024/06/01 09:41

Droppable(放置)组件也是一个基本组件，用法较简单，语法都在例子里面注释了：

示例：

<!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><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {$.fn.droppable.defaults.disabled = true;//重写默认值为true$('#dd').droppable({accept : '#box,#ipt',//设置哪些元素可以被接受disabled : false, //不单独设置默认值时默认为false,当设置为true的时候则禁止放置。/*onDragEnter只触发一次，而Over会在不停的拖动中不停触发,  onDragEnter触发的事件在移动过程中一瞬即逝,所以要想看清楚最好是看浏览器控制台,或者加个alert中断一下。onDrop是放入到放置区，松开鼠标左键，丢下的操作。*/onDragEnter : function (e, source) {console.log('昙花一现');$(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');}});$('#dd').droppable('disable');//禁止$('#dd').droppable('enable'); //允许$('#box').draggable({accept : '#ipt',//设置哪些元素可以被接受disabled : false //不单独设置默认值时默认为false,当设置为true的时候则禁止放置。});$('#ipt').draggable({});});</script></head><body><div id="dd" class="easyui-droppable"data-options="accept:'#box,#pox,#ipt'" style="width:600px;height:400px;background:#66ffff"></div><div id="box" style="width:100px;height:100px;background:#ccc;"><span id="pox">内容部分</span></div><div id="ipt" style="width:50px;height:50px;background:#ccc;">内容IPT</div></body></html>

点击下载源代码

0 0