仿jquery sortable函数实现动态元素排序在IE下不能执行的问题

jqueryjquery ui

解决方案 »

  1.   

    <!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=utf-8" />
    <title>物品栏拖拽--Drag and Drop</title>
    <meta name="description" content="物品栏拖拽,拖放" />
    <meta name="keywords" content="物品栏拖拽,拖放" />
    <style type="text/css">
    h1{
    font-size:24px;
    font-family: arial;
    margin: 10px;
    }.gbin1-list {
    list-style: none;
    padding:0;
    margin:0;
    }.gbin1-list li {
    line-height: 80px;
    float: left;
    width: 80px;
    height: 80px;
    text-align: center;
    border: 1px solid #CCC;
    margin: 10px;
    font-family: arial;
    background: #707070;
    color: #FFF;
    box-shadow: 0px 0px 10px #505050;
    border-radius: 5px;
    padding: 0px;
    }#msg{
    font-size:12px;
    font-family: arial;
    background: #303030;
    color: #cccccc;
    padding: 10px;
    display: none;
    width: 370px;
    margin: 10px;
    }
    </style>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    </head>
        <style>
            li{ width:100px; height:50px; background:#0080FF; border:10px solid #AA9FFF;
            margin:10px; padding:10px; list-style: none; float:left; position:relative;
            } #drop{ background:#979797; min-height:200px; height:auto; } ul{ display:block;
            background:#CCCCCC; height:200px; } .hover{ background:green!important;
            } .active{ background:#0080FF!important; } #test{ margin:10px; }
        </style>
        
        <body>
    <div style="margin:30px;padding:40px">
               
                <button id="addul">
                    添加ul
                </button>
                <button id="addli">
                    添加li
                </button>
                <ul id="temp">
                    <li>
                        <a href="http://www.baidu.com">
                            百度搜索
                        </a>
                    </li>
                    <li>
                        <a href="http://www.google.com">
                            google搜索
                        </a>
                    </li>
                    <li>
                        <a href="http://www.bing.com">
                            必应搜索
                        </a>
                    </li>
                    <li>
                        操作系统原理
                    </li>
                </ul>
                <div id="debug">
                </div>
            </div>
        </body>
        <script>
            $("ul").sortable({
                items: "li:not(#test)",
                axis: "",
                update: function(b, c, a) {}
            });        $("#addul").click(function() {
                $("#temp").before($("#temp").clone())
            });
            $("#addli").click(function() {
                $("ul").append($("<li>new</li>"))
            });
        </script>
    </html>