easyui Draggable组件实现拖动效果

网络编程 2024/11/19 佚名

3 1 2

easyui做为一个封装了JQusey的UI插件，其实还是蛮好用的，至少省了像我这种渣渣很多时间。

Draggable的加载方式有两种：

1，通过class加载，如下：

<div id="box" class="easyui-draggable"></div>

通过JS加载，如下：

$('#box').draggable();

以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的，他们都是通过调用easyui已经写好的函数，来实现jQuery效果的。

Draggable的属性：

　　revert 当值为true时，拖动停止时返回起始位置，可以到处拖。

revert : boolean,

　　axis　　限制拖动的方向，水平'h'？垂直'v'？这个和 revert组合起来比较有意思，设置拖动方向为

　　　　　　垂直的话就跟微信，微博刷新消息一样。

axis : String/'v'/'h',

　　proxy　　克隆，就是拖动的时候要拖动的对象不变，然后在鼠标上复制一个要拖动的对象，当然也

　　　　　　可以是其他的，可以触发function。

proxy : null/String/function,
　　然后还有很多其他的属性，觉得并不是特别有趣。

cursor : move/String ,     //指定拖动时候指针的CSS样式变得美美哒
deltaX : null/number,
deltaY : null/number,    //被拖动的元素对应于当前光标位置的x,y 就是给被   拖动元素与光标一个距离
handle : null/selector    //开始拖动的句柄   手柄！只能用手柄拖动！对的！
disabled : boolean        //设置为true是，不能拖动当先绑定的元素
edge : number             //可以在其中拖动的容器的宽度从容器的上下左右往里算，就像一个矩形里面包着一个矩形，然后里面那只有鼠标放在里面矩形的时候元素才能被拖动

例子：

$('#box').draggable({
  revert : true,
  cursor: 'text',
  handle : '#pox',
  disabled : false,
  edge : 50,
  axis :'v',
  proxy : 'clone',
  deltaX: 10,
  deltaY : 10,
  proxy: function(source){
    console.log('呵呵哒！');
  }
});

Draggable的事件：

　　onBeforeDrag 拖动之前触发，返回false将取消拖动

onBeforeDrag : function (e){
  alert('拖动之前触发');
  return false;
}

　　onStartDrag 拖动时触发

onStartDrag : function(e){
  alert('拖动时触发');
}

　　onDrag 拖动过程中触发，不能拖动事返回false

onDrag : function(e){
  alert('拖动过程触发');
}

　　onDrag 停止拖动时触发

onStopDrag : function (e){
  alert('在拖动停止时触发');
}

　Draggable 方法列表

　　options 返回属性对象

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

　 proxy 如果代理属性被设置则返回该拖动代理元素

console.log($('#box').draggable('proxy'));

　　enable 可以被拖动

$('#box').draggable('enable');

　　disable 禁止被拖动

$('#box').draggable('disable');

我们来看个简单的例子

<pre class="brush:java;">html>
 
 
 
  <meta charset="UTF-8">
  <title>Basic Draggable - 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="/UploadFiles/2021-04-02/jquery.min.js">

以上差不多就是Easyui 1.2.5  Draggable的全部属性，事件、方法和示例了, 如果有什么不对的话，欢迎评论，一起讨论和赐教。

easyui,Draggable,easyui拖动

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“easyui Draggable组件实现拖动效果”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

easyui Draggable组件实现拖动效果

jQuery满意度星级评价插件特效代码分享

使用CamanJS在Web页面上处理图像的技巧

评论“easyui Draggable组件实现拖动效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接