Question

我的问题有些奇怪。我有一个dropable和一个可排序的。当sortable为空，然后我将元素放入那里并尝试对它们进行排序时，排序无法正常工作。占位符通常不会正确更改位置。 Look here.

但是！（这很奇怪）当我直接在HTML中填充sortable时，排序效果很好！它很顺利，反应正确。 Look here.

在两个版本中，可排序的LI元素都是相同的！我不知道出了什么问题，已经花了好几个小时...... 有人有想法吗？

编辑：

Javascript的代码：

$(function() {
    $( "#ipk li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#display ul" ).droppable({
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $( '<li></li>' ).addClass('ui-state-default ui-sortable-handle').text( ui.draggable.text() ).appendTo( this );
        }
    });
    $( "#display ul" ).sortable();
    $( "#display ul" ).disableSelection();
});

CSS：

#display { width: 800px; height: 250px; padding: 10px; border: 1px solid #ebebeb; }
#display ul { list-style-type: none; margin: 0; padding: 0; width: 850px; height: 200px; }
#display li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 25px; text-align: center; border: 1px solid #ebebeb; }

有问题的HTML：

<div id="ipk">
    <h1 class="ui-widget-header">IPKs</h1>
    <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Banana</li>
        <li>Onion</li>
    </ul>
</div>

<div id="display">
    <h1 class="ui-widget-header">Display</h1>
    <div class="ui-widget-content">
        <ul class="ui-sortable">
        </ul>
    </div>
</div>

HTML没有问题：

<div id="ipk">
    <h1 class="ui-widget-header">IPKs</h1>
    <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Banana</li>
        <li>Onion</li>
    </ul>
</div>

<div id="display">
    <h1 class="ui-widget-header">Display</h1>
    <div class="ui-widget-content">
        <ul class="ui-sortable">
            <li class="ui-state-default ui-sortable-handle">Apple</li>
            <li class="ui-state-default ui-sortable-handle">Orange</li>
            <li class="ui-state-default ui-sortable-handle">Banana</li>
            <li class="ui-state-default ui-sortable-handle">Onion</li>
        </ul>
    </div>
</div>

jQuery UI可排序无法正常工作

0 个答案: