jquery UI Draggable和Droppable 案例
<html> <head><title>draggable</title> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script> </head> <body> <div id="container" style="background-color:#ccc;width:500px;height:300px;"> <div class="alert alert-dismissable alert-info dragsource"> <p>aaaa</p> </div> <div class="alert alert-dismissable alert-info dragsource"> <p>bbbb</p> </div> <div class="alert alert-dismissable alert-info dragsource"> <p>cccc</p> </div> </div> </body> </html> <script type="text/javascript"> $(function () { $(".dragsource").draggable({ revert: "invalid", cursor: "move", //移动时鼠标的位置 cursorAt: { top: 56, left: 56 }, snap: ".dragsource",//吸附到其他可托动元素 containment: "parent",//限制拖放范围,亦可以用四元数组 //axis: "y",//只可以沿着Y轴拖动 start: function (event, ui) { //$(this).find("p").html("Starting"); }, stop: function (event, ui) { // $(this).find("p").html("stop"); } }); $("#container").droppable({ //activeClass: "ui-state-hover", //hoverClass: "ui-state-active",//拖动时的样式 activate: function (event, ui) { // $(this).find("p").html( "Drop here !" ); }, over: function (event, ui) { // $( this ).find( "p" ).html( "Oh, Yeah!" ); }, out: function (event, ui) { // $( this ).find( "p" ).html( "Don't leave me!" ); }, drop: function (event, ui) { //拖放 // $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); } }); }) </script>
jquery UI Draggable和Droppable 案例的更多相关文章
- JQuery UI Draggable插件使用说明文档
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
- jQuery UI - draggable 中文API
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable(转)
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable参数中文详细说明
概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...
- Jquery ui draggable在chrome和ie7下的bug
当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...
- jQuery UI Draggable + Sortable 结合使用
工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...
- JQuery UI - selectable
·概述 Selectable插件允许用户对指定的元素进行选中的动作.此外还支持按住Ctrl键单击或拖拽选择多个元素. 官方示例地址:http://jqueryui.com/demos/selectab ...
随机推荐
- 处理部分WordPress核心代码或功能,让你的网站更快
处理部分WordPress核心代码或功能,让你的网站更快 http://www.wpdaxue.com/speed-up-wordpress.html
- (转载)根据数据字典表定义的表结构,生成创建表的SQL语句
<来源网址:http://www.delphifans.com/infoview/Article_221.html>根据数据字典表定义的表结构,生成创建表的SQL语句 //1. 类名:T ...
- Catalyst揭秘 Day8 Final 外部数据源和缓存系统
Catalyst揭秘 Day8 Final 外部数据源和缓存系统 今天是Catalyst部分的收官,主要讲一些杂项内容. 外部数据源处理 什么叫外部数据源,是SparkSql自己支持的一些文件格式,以 ...
- Programming Collective Intelligence
最近正在拜读 O'reilly出版的Programming Collective Intelligence,准备研究研究搜索引擎了,童鞋们,到时候会考虑公布源码哦!
- Java 类和对象
主要参考文献:王映龙<Java程序设计> 一:类的语法 [修饰符]class<类名>[extends父类名][implements接口列表]{ //类体} 1:修饰符 可选值为 ...
- android.support.v4.widget.DrawerLayout使用
activity_main.xml布局如下: <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas ...
- mysql 连接丢失错误解决(转载)
1.1 错误信息: Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: The last packet succes ...
- IIS (HTTP Error 500.21 - Internal Server Error)解决
今天在测试网站的时候,在浏览器中输入http://localhost/时,发生如下错误: HTTP Error 500.21 - Internal Server Error Handler " ...
- centos7 更新yum安装源
系统自带的yum安装源有些软件找不到 这里我们使用阿里云的源 1.加源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/re ...
- MySQL分区表(转)
查看分区情况 SELECT * FROM information_schema.PARTITIONS WHERE table_name='table_name': PARTITION_NAME:分区的 ...