sortable items不让他拖，也不让他放。cancel不然他拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>selectable</title>
<link href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ padding:20px; font:12px Arial, Helvetica, sans-serif;}
ul,li{ list-style:none;}
#s_item,#s_item2{ width:280px; float:left;}
#s_item li,#s_item2 li{ width:260px; height:30px; border:1px solid #ccc; margin-bottom:3px; line-height:30px; text-indent:8px; background:#eee;}
#s_item2 li{ background:#fcc;}
</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/jquery.ui.sortable.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#s_item").sortable({
items:"li:not(li.not_me)"
});
$("#s_item2").sortable({
cancel:".cancel_me"
});
})
</script>
</head>
<body>
<ul id="s_item" class="connect">
<li>Item 1</li>
<li class="not_me">Item 2 not_me</li>
<li class="not_me">Item 3 not_me</li>
<li class="not_me">Item 4 not_me</li>
<li>Item 5</li>
</ul>
<ul id="s_item2" class="connect">
<li>Item 1</li>
<li class="cancel_me">Item 2 cancel_me</li>
<li class="cancel_me">Item 3 cancel_me</li>
<li class="cancel_me">Item 4 cancel_me</li>
<li>Item 5</li>
</ul>
</body>
</html>
sortable items不让他拖，也不让他放。cancel不然他拖动的更多相关文章
- HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- jqueryui sortable拖拽后保存位置
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var a ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vuejs2.0使用Sortable.js实现的拖拽功能( 转)
文章目录 简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- Jquery.Sorttable 桌面拖拽自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 关于jqueryUI里的拖拽排序
主要参考http://jsfiddle.net/KyleMit/Geupm/2/ (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这 ...
随机推荐
- ASP.NET基础之HttpHandler学习
ASP.NET基础之HttpHandler学习 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP.NET基础之HttpContext学习]文章的学习我们对ASP.NET的基础内容有 ...
- Android_NDK问题:APP_BUILD_SCRIPT points to an unknown file: <project_path>/jni/Android.mk
问题详情: Android NDK: Your APP_BUILD_SCRIPT points to an unknown file: <path>/jni/Android.mk ...: ...
- 飘逸的python - 简明gzip模块压缩教程
压缩数据创建gzip文件 先看一个略麻烦的做法 import StringIO,gzip content = 'Life is short.I use python' zbuf = StringIO. ...
- 解决TXT乱码问题
初装Ubuntu,打开windows保存的txt文件很可能会遇到各种乱码问题. 下面是wiki ubuntu里的解决办法: Gedit中文乱码 缺省配置下,用 Ubuntu 的文本编辑器(gedit) ...
- linux培训笔记1
第五章 文件和目录的管理 linux命令的基本格式 #命令 [选项] [参数] 1.linux下的常用命令 (1)ls 查看(列出)目录下的内容 -l 查看文件详 ...
- 黑马程序员：Java基础总结----网络编程
黑马程序员:Java基础总结 网络编程 ASP.Net+Android+IO开发 . .Net培训 .期待与您交流! 网络编程 网络通讯要素 . IP地址 . 网络中设备的标识 . 不易记忆,可用 ...
- Android开发（21）--有关Spinner控件的使用说明
下拉列表 Spinner,Spinner是一个每次只能选择所有项的一个项的控件.它的项来自于与之相关联的适配器中. Spinner的使用,可以极大提高用户的体验性.当需要用户选择的时候,可以提供一个下 ...
- Java DB loadBalance 设计
Java DB loadBalance 设计 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {backgr ...
- Java多线程基础——线程间通信
在使用多线程的时候,经常需要多个线程进行协作来完成一件事情.在前面两章分析了Java多线程的基本使用以及利用synchronized来实现多个线程同步调用方法或者执行代码块.但上面两章的内容涉及到的例 ...
- 没有花括号(大括号)的for循环也能正确执行
代码一 for循环没有{}大括号(花括号),在for语句下面是一条语句. for(var i=0;i<3;i++) console.log(1,i); 上面的代码能无误输出: 1 01 11 2 ...