リストの場所の変更

11637 ワード
jquery sortable テキストリンク

リストの場所を変更します。


以前私が作ったto-doリストを使っていましたが、今回は挑戦でやることとやることを増やしました.そのように使うのは不便で、いくつかの機能を増やしたいです.まず、to-doリストの順序を変更したいです.だからグーグルで検索した結果、JavaScriptでdraganddrop活動を実現できるが、複雑すぎるように見えた.このプロセスでは、jqueryのsortableが検出され、適用されます.
jqueryはjavascriptとは異なり、htmlにjquery source scriptを追加し、その下にsriptタグを書き、jqueryコードを入力する方法です.jquery UIとlibraryが必要です.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>JUST F**KING DO IT</title>
  </head>
  <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 () {
      $("#js_pending").sortable({
        //옮기고 싶은 리스트를 id 로 명시하고 sortable 함수를 추가한다.
        axis: "y", // y축 방향으로 옮긴다.
        revert: true, // 커서를 놓으면 부드럽게 옮겨진 위치로 리스트가 이동한다
        scroll: true,
        placeholder: "sortable-placeholder", // 옮겨질 위치에 임시로 무언가를 표시해준다. index.css에 sortable-placeholder {opacity:0.5} 로 설정해놓았다.
        start: function (event, ui) {
          console.log(ui.item.html());
          ui.placeholder.html(ui.item.html()); // 그리고 선택한 아이템을 placeholder있는자리에 위치하도록 한다.
        },
      });

      $("#js_pending").disableSelection(); // 아이템안에서 선택을 못하게 하는 기능이라고 한다.
    });
  </script>

  <body>
    <section class="list">
      <div>
        <h3>PENDING</h3>
        <ul id="js_pending"></ul>
      </div>
      <div>
        <h3>FINISHED</h3>
        <ul id="js_finished"></ul>
      </div>
    </section>
  </body>
</html>
[白俊]18513先生(c++)
左右スライド切替Activityを実現