zoukankan      html  css  js  c++  java
  • 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{ 280px;  float:left;}
    #s_item li,#s_item2 li{ 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>

  • 相关阅读:
    网易编程题——小易喜欢的单词
    Effective C++ 条款12:复制对象时勿忘其每一个成分
    Effective C++ 条款11:在operator=中处理"自我赋值"
    STM32-通用定时器基本定时功能
    GPIO_Mode
    STM32的ADC编程方法
    STM32的ADC采样与多通道ADC采样
    网络子系统
    linux网络子系统内核分析
    Linux 中高效编写 Bash 脚本的 10 个技巧
  • 原文地址:https://www.cnblogs.com/zcm123/p/6165005.html
Copyright © 2011-2022 走看看