그누보드 QA - jquery 드래그 앤 드롭으로 정렬하는것중..

jquery 드래그 앤 드롭으로 정렬하는것중..

2016.09.20 20:17:04 조회 8468 (218.♡.♡.68)

본문

오늘 여러개를 질문드리네요...
제이쿼리 드래그 앤 드롭 기능을 활용하여 목록을 정렬하는 sortable 기능?이 있는데요

이걸 활용해서 랜덤하게 배열된 문장 단어들을 재배열 시키거 저장하려합니다.

보통 sortable 이 세로로 되는데 이걸 문장에 적용을 해야하기 때문에 가로로 만들어져야하고 정렬후에 정렬 값을 form으로 전송해야 하기 때문에 정렬할 때마다 정렬 값들이 하나의 input hidden에 입력이 되었으면 합니다.

제이쿼리는 아는게 없어서 머리속으로 구상만 하고 손을 못대고 있습니다.

가장 근접한것이 http://jsfiddle.net/gmouzakitis/C2f4P/5/
이건데요 이건 모바일에서는 안되네요

가르침 부탁드립니다

#제이쿼리 #드래그 #드롭 #sortable

답변 2

글러빙 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-09-20 21:37:20 1.♡.♡.140

참조: http://forresst.github.io/demos/sortable/en/index.html


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example sortable list</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" />
    <style>
    /* 아이템 가로 리스팅 
    li { float:left; }
    */
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://forresst.github.io/js/jquery.ui.touch-punch.min.js"></script>
    <script>
    $( document ).ready(function() {
        $( "#sortable" ).sortable({
            update: function( event, ui ){
                var arr = [];
                $('ul#sortable > li').each(function(){
                    arr.push( $(this).text() );
                });
                var result = arr.join(', ');
                $('#input-tag').val( result );
            }
        });
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
        $( "#sortable" ).bind( "sortstop", function(event, ui) {
            $('#sortable').listview('refresh');
        });
    });
    </script>
</head>
 
<body>
 
    <div data-role="content" data-theme="c">
 
        <input type="text" id="input-tag" value="">
        <!-- <input type="hidden" id="input-tag" value=""> --> 
        <ul id="sortable" data-role="listview" data-inset="true" data-theme="d">
            <li>아이템 1</li>
            <li>아이템 2</li>
            <li>아이템 3</li>
            <li>아이템 4</li>
            <li>아이템 5</li>
        </ul>
 
        <!-- 디자인 없는 버전 ~ 
        <div id="sortable">
            <span>아이템 1</span>
            <span>아이템 2</span>
            <span>아이템 3</span>
            <span>아이템 4</span>
            <span>아이템 5</span>
        </div>
        -->
 
    </div>
 
</body>
</html>