easyUI之可拖动控件——easyui-draggable

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-29 05:09   11   0


以上为组件的属性,一下对属性做实践操作解释:

draggable提供可拖动控件

实现方式(js):

页面定义:

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">
<span id="resurce">内容可拖动</span>
</div>

js实现:

$('#box').draggable({
revert:true, //拖动停止后,是否返回原位置
cursor:'text', /拖动时鼠标的图形变换
//handle: '#resurce', //设置哪些内容才能触发拖动
edge:10, //设置拖动时距离拖动容器边缘的宽度
//disabled:false, //设置是否可拖动
axis:'v', //设置拖动水平'h',还是垂直'v'
proxy:'clone', //设置拖动时是否克隆原内容
deltaX:10, //鼠标距离拖动触发位置水平距离x
deltaY:10, //鼠标距离拖动触发位置垂直距离y
proxy:function(source){ //自定义克隆元素内容
var p = $('<div style="border:1px solid #ccc ; width:400px;height:200px;"></div>');
p.html($(source).html()).appendTo('body');
return p;
}
});


事件列表(如下表解释,不做过多解释):



方法列表:


解释如下:


代理元素需要在拖动前或开始的function中定义,clone是在开始的时候才能clone。


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP