スポンサーサイト

2023.04.20 Thursday
0

    一定期間更新がないため広告を表示しています

    category:- | by:スポンサードリンク | - | - | -

    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) | -

      マウスコンピューターのノートパソコンSSDじゃないか!!!しかも5万円以下だった

      2017.02.12 Sunday 22:53
      0
        最近マウスコンピューターがCMに乃木坂使ったりと
        広告に力いれてるなーと思ったら、今回PRしてるのがSSDのノートパソコンじゃないか!

        mouse ノートパソコン MB-BN26C82S-ZN Windows 10/Celeron/15.6インチ/SSD240GB/

        mouse ノートパソコン MB-BN26C82S-ZN Windows 10/Celeron/15.6インチ/SSD240GB/


        前からSSDは気になっていたので早速買うことにしたったよ!
        category:パソコン | by:ittoocomments(0)trackbacks(0) | -

        ad
        Calender
           1234
        567891011
        12131415161718
        19202122232425
        262728    
        << February 2017 >>
        Selected entry
        PR
        Category
        Archives
        Recommend
        Link
        Profile
        Search
        Others
        Mobile
        qrcode
        Powered
        無料ブログ作成サービス JUGEM