zoukankan      html  css  js  c++  java
  • jQuery 拖动排序

    原文发布时间为:2010-04-11 —— 来源于本人的百度文章 [由搬家工具导入]

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>jQuery UI Sortable - Default functionality</title>
    <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src=">
    <script type="text/javascript" src=">
    <script type="text/javascript" src=">
    <script type="text/javascript" src=">
    <script type="text/javascript" src=">
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #sortable { list-style-type: none; margin: 0; padding: 0; 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script type="text/javascript">
    $(function() {
       $("#sortable").sortable();
       $("#sortable").disableSelection();
    });
    </script>
    </head>
    <body>
    <div class="demo">

    <ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>

    </div><!-- End demo -->

    <div class="demo-description">

    <p>
    Enable a group of DOM elements to be sortable. Click on and drag an
    element to a new spot within the list, and the other items will adjust to
    fit. By default, sortable items share <code>draggable</code> properties.
    </p>

    </div><!-- End demo-description -->

    </body>
    </html>

  • 相关阅读:
    一行代码搞定Dubbo接口调用
    测试周期内测试进度报告规范
    jq 一个强悍的json格式化查看工具
    浅析Docker容器的应用场景
    HDU 4432 Sum of divisors (水题,进制转换)
    HDU 4431 Mahjong (DFS,暴力枚举,剪枝)
    CodeForces 589B Layer Cake (暴力)
    CodeForces 589J Cleaner Robot (DFS,或BFS)
    CodeForces 589I Lottery (暴力,水题)
    CodeForces 589D Boulevard (数学,相遇)
  • 原文地址:https://www.cnblogs.com/handboy/p/7158367.html
Copyright © 2011-2022 走看看