jqueryui sortable テスト マウスドラッグで並び替えの順番を変える

2017.02.19 Sunday 23:13
0
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 500px; }
    // #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; }
    #sortable li { height:20px; }
    .numid { height:20px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

    .x-y {
    border: solid 0px orange;
    background: lemonchiffon;
    width: 360px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
    } );
    </script>
    </head>
    <body>





    ポイントは 並び順の番号は、id="sortable" の外がわに記載すること。そうでないと
    ドラッグすると全部うごいてしまう。
    <table >
    <tr >
    <td style="vertical-align:top;">
    <div class="numid">1</div>
    <div class="numid">2</div>
    <div class="numid">3</div>
    <div class="numid">4</div>
    <div class="numid">5</div>
    <div class="numid">6</div>
    <div class="numid">7</div>
    </td>
    <td>
    <ul id="sortable" class="x-y" style="white-space: nowrap;">
    <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>
    </td>
    </tr>
    </table>






    </body>
    </html>
    category:jquery | by:ittoocomments(0)trackbacks(0) | -

    ad
    Calender
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << September 2017 >>
    Selected entry
    PR
    Category
    Archives
    Recent comment
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      66hills
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      ssd
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      max
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      DOM
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      DOM
    • コンピュータ業界の根本的な変化
      cloud
    • コンピュータ業界の根本的な変化
      Dellの仮想化
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      えちごや
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      touch
    • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
      bob77777
    Recent trackback
    • スマートフォンの法人活用例
      無線LANネットのブログ
    • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
      特選情報
    Recommend
    Link
    Profile
    Search
    Others
    Mobile
    qrcode
    Powered
    無料ブログ作成サービス JUGEM