[jQuery UI] 드래그를 통해 요소 재배열[Sortable]

7294 단어 jQueryJavaScriptjquery-ui

[jQuery UI] 드래그를 통해 요소 재배열[Sortable]


jQuery UI의 Sortable 기능을 사용하여 요소를 동적으로 재배열합니다.
실무에서 사용할 수 있는 기회도 있고 어디서 사용할 수 있는 느낌도 있기 때문에 메모의 노트입니다.

목표


드래그하여 동적으로 HTML 요소 재정렬

환경

  • ECMA Script5
  • jQuery 1.11.1
  • jQuery UI

    • 소스 코드


    sample.html
    <!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <!-- CSS読み込み -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <!-- CSSを記述 -->
    <style>
        .sort-elements {
            height: 100px;
            border:solid 2px;
            margin:10px;
            background-color:#999999;
        }
    </style>
</head>

<body>
    <!-- ここにHTML要素 -->
    <div id='sortable'>
        <div id='a' class='sort-elements'>a</div>
        <div id='b' class='sort-elements'>b</div>
        <div id='c' class='sort-elements'>c</div>
    </div>
    <!-- Script読み込み -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <!-- jQueryでイベント記述 -->
    <script>
    jQuery( function() {
        /**
         * sortable
         */
        jQuery( '#sortable' ) . sortable( {
                cursor: 'move',                     //移動中のカーソル
                opacity: 0.7,                       //移動中の項目の透明度
                placeholder: "ui-state-highlight",  //ドロップ先の色指定(Styleで指定可能)
                forcePlaceholderSize: true          //trueでドラッグした要素のサイズを自動取得できる
        } );
        $( '#sortable' ).disableSelection();
        /**
         * 動作
         */
        jQuery(document).on('sortstop','#sortable',function(){
            alert('並び替え時の動作')               //sortstopイベントで並び替え後処理を実行
        });
    } );
    </script>
</body>

</html>
    득점
  • CDN으로 jQuery와 jQueryUI를 읽고 jQuery로 속성을 기술합니다.
  • 속성 이벤트 등은 API를 참조하십시오.
    http://stacktrace.jp/jquery/ui/interaction/sortable.html
  • placeholder에서 지정한 종류의 스타일은 이동 예정지의 스타일이 된다.
    기본값을 이용하면 노란색 빛이 나지만 개작을 통해 다양한 맞춤형 제작이 가능하다.
  • forcePlaceholderSize는 드래그 요소의 크기를 자동으로 가져옵니다.편리하다

    • 결과


    다시 정렬할 때

    다시 정렬 후

    감상

  • DOM 작업 등은 번거롭지만 사용하기 쉽고 알기 쉬운 라이브러리입니다.
  • 이외에도 Draggable, Droppable 등 재미있는 기능이 있어서 요즘 한번 써보고 싶어요.

    • 참고 자료


    jQuery UI 일본어 참조
    http://stacktrace.jp/jquery/ui/
    jQuery UI의 Sortable을 사용하여 드래그하여 정렬
    http://alphasis.info/2011/05/jquery-ui-sortable/
    jquery ContextMenu 라이브러리에서 항목을 전환하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage