2019-05-30 Ready-three 关于拖拽排序问题

先引入

//jq文件
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
//jq ui文件
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

html文件

 <ul id="sortable">
        <li class="ui-state-default">
            item1
            <ol class="ol">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>

            </ol>
        </li>
        <li class="ui-state-default">Item 2

                <ol class="ol">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
        
                    </ol>
        </li>
        <li class="ui-state-default">Item 3

                <ol class="ol">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
        
                    </ol>
        </li>
        <li class="ui-state-default">Item 4
                <ol class="ol">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
        
                    </ol>
        </li>
    
    </ul>

css文件

  #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 20%;
            cursor: pointer;
        }

        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 1.5em;
            font-size: 1.4em;
            /* height: 18px; */
        }
        ol{
            list-style: none;
            display: none
        }       

js文件

 $(function () {
            $("#sortable").sortable();//开启拖拽方法
            $(".ol").sortable();
            $("li").click(function(){
                console.log($(this).index());
                return false    
            })
            
            $("#sortable>li").click(function(){
                $(this).find(".ol").slideToggle()
            })
            
        });

其他参数可参考！https://www.cnblogs.com/jiangtuzi/p/3758389.html