jquery拖拽效果
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">请拖拽我</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
jquery拖拽效果的更多相关文章
- jQuery的DOM操作实例（2）——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- div拖拽效果 JQuery
<!DOCTYPE html> <html> <head> <meta name="description" content=" ...
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- 使用mousedown、mousemove、mouseup实现拖拽效果
如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WinForm支持拖拽效果
有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- cocos2d基本类介绍 director/scene/layer/sprite
[核心类] 导演Director.场景Scene.布景层Layer.精灵Sprite的概念请移步: 导演控制场景,场景控制图层,图层控制精灵,精灵控制动作. 相互之间的关系框架 ...
- 2016 ACM/ICPC Asia Regional Qingdao Online 1001 I Count Two Three
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- 一台服务器上同时启动多个 Tomcat
在同一台服务器上启动多个 Tomcat 服务,需要修改 conf/server.xml文件里的三个部分,如下: 1.修改Http访问端口(默认为8080端口) <Connector port=& ...
- Socket编程中 setsockopt的作用
功能描述: 获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时,选项位于的层和选项的名称必须给出.为了操作套接字层的选项,应该 将层的值 ...
- My Eclipse Security Alert
SECURITY ALERT: INTEGRITY CHECK ERROR This product did not pass the MyEclipse integrity check. This ...
- 常用的HTTP方法
方法 描述 是否包含主体 GET 从服务器获得一份文档 否 HEAD 只从服务器获得响应报文的首部 否 POST 向服务器发送需要处理的数据 是 PUT 将请求 ...
- [Jenkins]admin用户登陆，提示登陆无效（之前登陆OK，三天没有登陆，突然提示登陆无效，重启无法解决）的解决方法
问题出现现象: 系统一直正常,突然某天登陆,提示用户无效,无法登陆成功. 问题分析过程: 1.查看日志:/var/log/jenkins/jenkins.log(通过ps -elf | grep je ...
- 冰刃IceSword中文版 V1.22 绿色汉化修正版
软件名称: 冰刃IceSword中文版 V1.22 绿色汉化修正版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 2.1MB 图片预览: 软件简介: Ic ...
- 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG
一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...
- CentOS7 安装 OpenSSL 1.0.1m 和 OpenSSH 6.8p1
# 下载软件 wget http://zlib.net/zlib-1.2.8.tar.gz wget ftp://ftp.openssl.org/source/openssl-1.0.1m.tar.g ...