English | 正體中文 | 简体中文

Jquery ui sortable portlets



范例程式码 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 () {
        $("#container1,#container2").sortable({
            handle: ".title",
            placeholder: "placeholder",
            connectWith: ".container"
        });
        $("#container1,#container2").disableSelection();
    });
</script>

<!-- HTML -->
<style>
    .container{
       float:left;
       width:200px;
       height:300px;
       margin-left:10px;       
    }
    
    .containermiddle{
       float:left;
       width:250px;
       height:300px;
       margin-left:10px;       
    }
    
    .titlemiddle{
       background-color:gray;
       color:white;
       text-align:center;
    }
    
    .title{
       background-color:gray;
       color:white;
       text-align:center;
       cursor:pointer;
    }
    
    .placeholder{
       border:1px dotted red;
       height:100px;
       padding: 2px;
       margin-bottom:5px;
    }
    
    .widget{
      background-color:white;
      border-radius:5px;
      border:1px solid gray;
      height:100px;
      padding: 2px;
      margin-bottom:5px;
    }
    
    .middle{
      width:300px;
    }
    
    .content{
      line-height:80px;
      height:80px;
      text-align:center;
    }
</style>
<div id="container1" class="container">
    <div class="widget">
        <div class="title">Navigation</div>
        <div class="content">navigation content</div>
    </div>
    
    <div class="widget">
        <div class="title">Categories</div>
        <div class="content">categories content</div>
    </div>
</div>
<div id="containermiddle" class="containermiddle">
    <div class="widget">
        <div class="titlemiddle">Bulletin</div>
        <div class="content">bulletin content</div>
    </div>
    
    <div class="widget">
        <div class="titlemiddle">News</div>
        <div class="content">news content</div>
    </div>
</div>
<div id="container2" class="container">
    <div class="widget">
        <div class="title">Articles</div>
        <div class="content">articles content</div>
    </div>
    
    <div class="widget">
        <div class="title">Feeds</div>
        <div class="content">feeds content</div>
    </div>
</div>

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