<!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不然他拖动的更多相关文章

  1. HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动

    关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. jqueryui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用   var a ...

  4. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  5. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  6. vuejs2.0使用Sortable.js实现的拖拽功能( 转)

    文章目录   简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...

  7. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  8. Jquery.Sorttable 桌面拖拽自定义

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

  9. 关于jqueryUI里的拖拽排序

    主要参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这 ...

随机推荐

  1. 支持虚拟化也开来虚拟化就是装不上HyperV的解决方法

    使用NTBOOTautofix修复BCD 今日换了台性能更强劲的电脑,本是想好好爽一下,结果却是满满的悲剧.先是硬盘里的游戏一个都打不开,8.1你要不要这么烂.好吧,不娱乐,那工作吧,结果hyper又 ...

  2. 微信公众平台自定义菜单创建代码实现—java版

    搞了两天的自定义菜单,终于搞定了,现在分享下心得,以便后来者少走弯路...... 好了,先看先微信官方的API 官方写的很详细,但是我看完后很茫然,不知道你们什么感觉.  我知道是post一个带参数的 ...

  3. Python之路3Day

    3.python基础补充(集合,collection系列,深浅拷贝)   一.集合 1.集合(set): 把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(set elements ...

  4. vps使用(centos)2

    SVN Server搭建 1.安装软件包 [root@cloud ~]# yum install subversion mysql-server httpd mod-dav_svn mod-perl ...

  5. jvm内存JVM学习笔记-引用(Reference)机制

    在写这篇文章之前,xxx已经写过了几篇关于改jvm内存主题的文章,想要了解的朋友可以去翻一下之前的文章 如果你还不了解JVM的基本概念和内存划分,请阅读JVM学习笔记-基础知识和JVM学习笔记-内存处 ...

  6. Nodejs应用安全备忘录

    本人新博客www.wjs.photo,基于360的firekylin,感兴趣的可以看看哈 本文翻译自 www.risingstack.com ,并非逐字逐句的翻译,有错误的地方请指出,谢谢啦 应用程序 ...

  7. Spring IOC的理解

            学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理 ...

  8. angularjs过滤器(一)------禁止转载------

    如果用代码实现:将new Date()转换为 M/D/YY 00:00 格式. 启用过滤器有两种方式:①在HTML中用"|"启用过滤器.格式为{{$scope.property | ...

  9. win7、win8.1淡绿色护眼模式设置

    Win7设置: 右击桌面 -> 个性化 -> 窗口颜色 -> 高级外观设置 选中 -> 项目:窗口     颜色:其他 修改:色调  饱和度 亮度 红  绿  蓝 添加到自定义 ...

  10. sql语句实现隐藏手机号码中间四位的方法

    1、select REPLACE(mobile,SUBSTR(mobile,4,4), '****') as mobile from tableName 2、select INSERT(mobile, ...