可排序的JQuery UI问题

时间:2015-10-02 12:01:33

标签: jquery html jquery-ui

我正在使用jQuery draggable和droppable以及可排序操作,我能够从一个div部分拖放到另一个div部分,但是在执行排序操作时我面临问题的droppable div部分。

当我将内容从draggable div部分拖动到droppable div部分时,它必须动态地获取list decimal,我应该能够在droppable div部分中进行排序(前后移动)。

请帮我实施谢谢!

http://jsfiddle.net/j6dqk54p/4/

html代码

<div>
        <ol id="sortable"></ol>
    </div>
    <br/>
    <div>
        <ul id="draggable">
            <li>
                <div class="qitem">
                    <div>
                        <span class="question">Item1</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="qitem">
                    <div>
                        <span class="question">Item2</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

jquery代码

$(document).ready(function() {

        $("#sortable").sortable({
            revert: true,
                refreshPositions: true ,
                helper : 'clone',
                cursor: "move",
                delay: 1,
                tolerance: 'pointer',
                revert: 50
        });

        $("#sortable").disableSelection();

        $(".qitem").draggable({
            //containment : "#container",
            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
        });

        $("#sortable").droppable({
            revert:true,
            hoverClass : 'ui-state-highlight',
            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) 
            {
                $(ui.draggable).clone().appendTo(this);
                if($(this)[0].id === "sortable")
                {
                    console.log($(this).closest("button").find('.hello'));
                    $(this).find('.hello').hide();
                    $(this).find('.btn').show();
                    ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul'));
                    return true;
                }
            }
        });
    });

0 个答案:

没有答案