English | 正體中文 | 简体中文

Jquery ui basic sortable



范例程式码 Expand
<!-- Javascript -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function () {
        $(".list").each(function () {
            $(this).mouseover(function () {
                $(this).css("border", "1px solid red");
            });
            $(this).mouseout(function () {
                $(this).css("border", "1px solid gray");
            });
        });
        $("#items").sortable();
        $("#items").disableSelection();
    });
</script>

<!-- HTML -->
<style>
    .list {        
        background-color:lightblue;        
        border:1px solid gray;
    }  
  
    #items .ui-selected { 
       background: red; 
       color: white; 
       font-weight:bold;
    }
  
    #items { 
       list-style-type: none; 
       margin: 0; 
       padding: 0;
       width:100px;
    }
  
    #items li{        
       margin: 2px; 
       padding: 2px;
       cursor:pointer;
       border-radius: 3px;
    }
</style>
<div id="info">Reanrannge items below, use mouse to drag items</div>
<ul id="items">
    <li class="list">Item 1</li>
    <li class="list">Item 2</li>
    <li class="list">Item 3</li>
    <li class="list">Item 4</li>
    <li class="list">Item 5</li>
    <li class="list">Item 6</li>
    <li class="list">Item 7</li>
    <li class="list">Item 8</li>
</ul>

    
在线测试程序
© 2012 PureExample.com contact