jq UI
来源:互联网 发布:ac尼尔森数据官网 编辑:程序博客网 时间:2024/06/05 03:12
- <scripttype="text/javascript">
- $(document).ready(function(){
- $(".block").draggable({
- //helper: "clone", //拖动时克隆,默认是 original
- //axis:"x", //定义拖动方向
- containment:"#contain", //定义一个容器,div就只能在容器的范围内活动了
- cursor: "move", //定义拖动时鼠标指针的状态 ,参数类型详见css中cursor配置
- cursorAt:{top:10}, //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框,单位px
- opacity: 0.40, //设置对象被拖动时的透明度
- handle: "div", //设置拖动控制器,也就是说当鼠标按住控制器的时候,才能拖动对象
- scroll:false, //设置当拖动超出整个浏览器窗口,是否滚动浏览器
- distance: 20, //设置当鼠标拖动多少像素时对象才会移动
- //delay: 1000, //设置延迟时间 单位毫秒
- grid:[50,50], //设置每次拖动的步进 单位px
- dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止
- start:function(e,ui){}, //开始拖动执行的函数
- drag:function(e,ui){}, //拖动时执行的函数
- stop:function(e,ui){} //拖动停止执行的函数
- }).resizable();
- $("#contain").draggable({
- revert: true, //设置对象被拖动释放后时候回到原始位置
- helper: "clone"
- });
- });
- </script><title>jQuery UI -- Draggable</title>
- </head>
- <body>
- <div id="contain">
- <divclass="block">
- <div class="hendle"style="background: green">handle</div>
- </div>
- </div>
- ----------------------------------------------------------------
- drag:function(e,ui){
- if(...)ui.position.left=0;
- if(...)ui.position.top=0;//实现元素可拖动的区域
- }
- ----------------------------------------------------------------
- $('#dialog').draggable({handle:$('#title')});//title位于dialog内部,当拖title后dialog才会动!!!
0 0
- jq UI
- JQ登录(模态框,jq-ui)
- JQ标签页(jq-ui)
- jq ui 日历控件
- JQ-UI控件记录
- jq ui 购物车
- jq UI插件
- JQ——日历(jq-ui)
- JQ——menu(jq-ui)
- JQ——tooltip(jq-ui)
- jq ui.dialog.js简介
- jq ui.dialog.js简介
- jQ多库共存及常见插件及jq,ui
- jq UI中的dialog属性设置
- jq ui datepicker添加时分秒
- jQ
- jQ
- jq
- javascript模块化编程(二)—AMD规范
- html页面内嵌 视频代码
- 在ListView中捕获button或其他clickable属性设为true的空间的点击事件
- 别让理想毁了人生
- 解决每次打开office 2010显示正在配置的问题
- jq UI
- JAVA基础2
- Image控件的source属性设置显示图片,给出不包含在项目里面的图片不完善解决方案..
- 配置java服务端SSL证书
- java设计模式之——委托模式
- Python 获得命令行参数的方法
- 的只是这座城。就像爱上一
- 浅论电信产业模块化经营分析
- 论数据库