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 ...
随机推荐
- 对golang服务器开发模式的一些思考
多线程+同步阻塞模型 在我们的游戏项目中使用的golang服务器开发方式如下 1.多线程逻辑 2.同步阻塞. 也就是说, 每个人一个线程(goroutine), io线程=逻辑线程 这种方式的优点: ...
- STM8S003K3用Tim1的通道4输出20KHz的PWM波
void Init_pwm(){TIM1_DeInit(); TIM1_TimeBaseInit(0, TIM1_COUNTERMODE_UP, 800, 0x00);//250 TIM1_OC4In ...
- LR中错误代号为27796的解决方法
问题: 曾经遇到过一个问题,在一次性能测试过程中,使用http协议的多用户向服务器发送请求.设置了持续时间,出现错误为:27796, Failed to connect to server 'ho ...
- Path of Equal Weight (DFS)
Path of Equal Weight (DFS) Given a non-empty tree with root R, and with weight Wi assigned to each ...
- Have Fun with Numbers (大数)
Notice that the number 123456789 is a 9-digit number consisting exactly the numbers from 1 to 9, wit ...
- [SQL SERVER系列]存储过程，游标和触发器实例[原创]
自己写的存储过程与游标结合使用的实例,与大家分享,也供自己查阅,仅供参考: --使用游标循环处理,删除重复的记录 declare @UserID int ) ) declare @UnitFlag i ...
- 进入 App Store 打分
很多用户用了好软件后忘记或嫌麻烦而不去 App Store 进行打分评星,为此开发者可以在应用中加入打分按钮,点击后直接跳转到 App Store 的评分界面. App Store 上评论的链接地址是 ...
- 1588: [HNOI2002]营业额统计 - BZOJ
Description营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天 ...
- bzoj 2876: [Noi2012]骑行川藏 拉格朗日数乘
2876: [Noi2012]骑行川藏 Time Limit: 20 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 1033 Solved: ...
- Aimp3的播放列表 按评分排序 落雨
如图,添加评分选项,并保存,就可以在下图的选项里找到此选项,并按评分排序 效果图如下:还可以倒置,迅速使评分高的音乐排在播放列表的前面位置!! 转自百度知道: http://zhidao.baidu. ...