澳门新葡萄京官网注册easyui Droppable组件实现放置特效

所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件。

Droppable的加载方式

澳门新葡萄京官网注册,1,class 加载 一直不太喜欢class方式的加载
浪费一个位置,代码一多还看着乱七八糟的。

复制代码 代码如下:div id=’dd’
data-options=”accept:’#box,#pox'”/div

2,js 加载调用

$("#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 在被拖拽元素到放置区域内的时候触发

2,onDragOver 在被拖拽元素经过放置区域的时候触发

3,onDragLeave 在被拖拽元素离开放置区域的时候触发

4,onDrop 在被拖拽元素放入到放置区的时候触发

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

Droppable 方法列表

1,options 返回属性对象

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

2,enable,disable 和上面属性的功能是一样的 分别是启用和禁止放置

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

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

!DOCTYPE htmlhtmlhead meta charset="UTF-8" titleAccept 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/headbody div /div div  drag me! div Drag 1/div div Drag 2/div div Drag 3/div /div div  drop here! /div div /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(){ $('.drag').draggable({ proxy:'clone', revert:true, cursor:'pointer', onStartDrag:function(){ $(this).draggable('options').cursor='not-allowed';//设置鼠标样式为不可拖动 $(this).draggable('proxy').addClass('dp');//设置样式 }, onStopDrag:function(){ $(this).draggable('options').cursor='auto';//设置鼠标 } }); //将容易置为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当元素被拖出(成功放入到某个容器)的时候触发 onDragOver:function(e,source){ alert("我被拖出去了");//先于alert("我被放下了");执行,表明其触发在onDrop之前。 } }); }); /script /body/html

运行效果图这里就不给出了,官网直接就可以查看。OVER!

效果地址:

easyui 1.3.5 Droppable 就此完结。

发表评论

电子邮件地址不会被公开。 必填项已用*标注