English | 正體中文 | 简体中文

Jquery ui sortable connectwith



范例程式码 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 () {
        $("#items1,#items2,#items3").sortable({
            connectWith: "#items1,#items2,#items3",
            start:function(event, ui){
                ui.item.toggleClass("highlight");
            },
            stop:function(event, ui){
                ui.item.toggleClass("highlight");
            }            
        });
        $("#items1,#items2,#items3").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-left: 10px; 
       padding: 0;
       width:100px;
       float:left;       
    }
  
    .items li{        
       margin: 2px; 
       padding: 2px;
       cursor:pointer;
       border-radius: 3px;
    }
     
    .g{
       background-color:lightgreen;
    }
    
    .o{
       background-color:orange;
    }
    
    .highlight{
       border:2px solid red;
       font-weight:bold;
    }
</style>
<div id="info">Reanrannge items below, use mouse to drag items</div>
<ul id="items1" class="items">
    <li class="list">Item 1-1</li>
    <li class="list">Item 1-2</li>
    <li class="list">Item 1-3</li>
    <li class="list">Item 1-4</li>
    <li class="list">Item 1-5</li>
    <li class="list">Item 1-6</li>    
</ul>
<ul id="items2" class="items">
    <li class="list g">Item 2-1</li>
    <li class="list g">Item 2-2</li>
    <li class="list g">Item 2-3</li>
    <li class="list g">Item 2-4</li>
    <li class="list g">Item 2-5</li>
    <li class="list g">Item 2-6</li>    
</ul>
<ul id="items3" class="items">
    <li class="list o">Item 3-1</li>
    <li class="list o">Item 3-2</li>
    <li class="list o">Item 3-3</li>
    <li class="list o">Item 3-4</li>
    <li class="list o">Item 3-5</li>
    <li class="list o">Item 3-6</li>    
</ul>

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