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 ...
随机推荐
- android 数据存储的四种方式.
Android系统一共提供了四种数据存储方式.分别是:SharePreference.SQLite.Content Provider和File.由于Android系统中,数据基本都是私有的的,都是存放 ...
- angularjs--$watch、$watchGroup、$watchCollection含义
angularjs的$watch.$watchGroup.$watchCollection使用方式 如果想在controller里面随时监听一个值的变化那就用$watch <p> ...
- sublime text2 中文乱码的解决办法
1.安装Sublime Package Control 在Sublime Text 2上用Ctrl+-打开控制台并在里面输入以下代码,Sublime Text 2就会自动安装Package Contr ...
- 《WPF程序设计指南》读书笔记——第9章 路由输入事件
1.使用路由事件 路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件.通俗地说,路由事件会在可视树(逻辑树是其子集)上,上下routed,如果哪个节点上订阅了 ...
- 1059. Prime Factors (25)
时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 HE, Qinming Given any positive integer N, y ...
- Java 多线程 简单实例 (Runnable)
1.多线程实例 package second; public class A implements Runnable { public char stat = '*'; public void run ...
- 【IOS】利用ASIHTTPRequest 实现一个简单的登陆验证
http://blog.csdn.net/toss156/article/details/7638529
- IOS播放音频 AVAudioPlayer(实例)
1. AVFoundation Build Phases => Link Binary With Libraies => + => AVFoundation.framework =& ...
- hdu 2566 统计硬币
http://acm.hdu.edu.cn/showproblem.php?pid=2566 假设一堆由1分.2分.5分组成的n个硬币总面值为m分,求一共有多少种可能的组合方式(某种面值的硬币可以数量 ...
- 1048: [HAOI2007]分割矩阵 - BZOJ
Description 将一个a*b的数字矩阵进行如下分割:将原矩阵沿某一条直线分割成两个矩阵,再将生成的两个矩阵继续如此分割(当然也可以只分割其中的一个),这样分割了(n-1)次后,原矩阵被分割成了 ...