用Jquery控制元素的上下移动实现排序功能

在页面上，控制元素上下移动，进行排序是我们比较常用的功能，今天我用jQuery写个简单方便，功能齐全的实现方式。

话不多说，直接上代码,下面是基础的引入jq和html元素部分：

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
  .content{
       float : left;
       height: 245px;
       width : 400px;
  }
   .content p{
         background: #eee;
         border:1px #000 solid;
         height: 30px;
         width: 100%;
   }
   .right{
     float: left;
    margin-left: 10px;
    height: 245px;
    width: 100px;
    padding: 5px;
    margin-top: 84px;
   }
   .right div{
    width: 85px;
    height: 50px;
    margin: 7px;
    text-align: center;
    background: #00BCD4;
    border-radius: 4px;
    cursor: pointer;
    line-height: 3;
   }
</style>
<body>

    <div class="content">
        <p data="false">001</p>
        <p data="false">002</p>
        <p data="false">003</p>
        <p data="false">004</p>
        <p data="false">005</p>
        <p data="false">006</p>
        <p data="false">007</p>
        <p data="false">008</p>
        <p data="false">009</p>
    </div>

    <div  class="right">
        <div onclick="goup()">上移到顶部</div>
        <div onclick="up()">上移</div>
        <div onclick="down()">下移</div>
        <div onclick="godown()">下移到尾部</div>
    </div>

</body>

更多相关文章

随机推荐

用Jquery控制元素的上下移动 实现排序功能

更多相关文章

随机推荐

用Jquery控制元素的上下移动实现排序功能