<!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拖拽效果的更多相关文章

  1. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  2. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  3. div拖拽效果 JQuery

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  4. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  5. 使用mousedown、mousemove、mouseup实现拖拽效果

    如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...

  6. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  7. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

  9. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Android Tips

    (1).设置图片缓存大小,一般可以设置为内存的1/8 int memoryCache = (int) (Runtime.getRuntime().maxMemory() / 8); (2). (3). ...

  2. MyEclipse 代码提示设置

    打开 Eclipse -> Window -> Perferences -> Java -> Editor -> Content Assist,在右边最下面一栏找到 au ...

  3. 信息设计工具IDT创建从SAP Business Object到SAP HANA的连接

    1. 打开Information Design Tool, 并添加BO Server的连接 2. 在Connection上右击, 选择Insert Relational Connection 3. 输 ...

  4. Linux中一些简单命令(一)

    1.查看当前用户:who 2.显示当前目录:pwd 3.查看当前服务器的时间:date 4.查看日历:cal+year; 例如:cal 2016 5.计算器:bc  退出计算器:quit或者ctrl+ ...

  5. 采用Jenkins搭建持续集成环境

    Jenkins介绍 Jenkins是一个CI工具.它可以根据设定持续定期编译,运行相应代码:运行UT或集成测试:将运行结果发送至邮件,或展示成报告... 这样做的最终目的是: 让项目保持健康的状态.如 ...

  6. 【转】gcc/g++ 如何支持c11 / c++11标准编译

     如果用命令 g++ -g -Wall main.cpp  编译以下代码 : 1 2 3 4 5 6 7 8 9 10 11 12 /*     file : main.cpp */ #include ...

  7. GL应用方面

    1.图和表 2.计算机辅助设计CAD 3.虚拟现实环境 4.数据可视化 5.教学与培训(基于VR) 6.计算机艺术 7.娱乐 8.图像处理 9.用户界面

  8. C#在客户端验证数字证书（Certificate）

    ServicePointManager.ServerCertificateValidationCallback = CertificateValidationCallback;//Init时执行,用于 ...

  9. SXT分布式缓存技术公开课的观后感

    最近几天在研究Redis,Redis作为最近比较流行的缓存技术,其特点还是很明显的,Redis使用Key-Value的结构来存储数据,Redis也是内存型的数据库,数据一开始是保存在内存中的,通过某些 ...

  10. Android数据库--Sqlcipher的使用（一）

    1.下载官方支持包:https://s3.amazonaws.com/sqlcipher/3.2.0/sqlcipher-for-android-community-v3.2.0.zip Github ...