javascript - 带有列表填充的 jQuery UI 可排序——不能超过数字

Question

fiddle

html

<ol id="input-l8YFwLZvwNZ4" class="infinitext-lis">
    <li>
        <input type="text" name="answers[0[text]" style="width:275px" class="infinitext-text">
        <input type="hidden" name="answers[0][order]">
    </li>
    <li class="">
        <input type="text" name="answers[1[text]" style="width:275px" class="infinitext-text">
        <input type="hidden" name="answers[1][order]">
    </li>
    ...
</ol>

js

$('#input-l8YFwLZvwNZ4').sortable();

当您按编号捕获列表项之一并将其向上或向下拖动到其他列表编号之一上方时，它们不会移动并允许您将列表项放在那里。您必须拿起一个元素，将鼠标向右移动并将其放在其中一个文本框上。

有办法解决这个问题吗？

Answer 1

看看这个 fiddle :http://jsfiddle.net/k19o7adr/1/

可排序的有序列表存在一些问题，所以我将其更改为 ul 标签，现在一切正常。

$('#input2').sortable();

<ul id="input2" class="infinitext-lis">
    <li>1.
        <input type="text" name="answers[0[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[0][order]"/>
    </li>
    <li class="">2.
        <input type="text" name="answers[1[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[1][order]"/>
    </li>
    <li class="">3.
        <input type="text" name="answers[4[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[4][order]"/>
    </li>
    <li>4.
        <input type="text" name="answers[2[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[2][order]"/>
    </li>
    <li class="">5.
        <input type="text" name="answers[5[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[5][order]"/>
    </li>
    <li>6.
        <input type="text" name="answers[6[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[6][order]"/>
    </li>
    <li class="">7.
        <input type="text" name="answers[3[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[3][order]"/>
    </li>
    <li class="">8.
        <input type="text" name="answers[7[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[7][order]"/>
    </li>
    <li>9.
        <input type="text" name="answers[8[text]" style="width:275px" class="infinitext-text"/>
            <input type="hidden" name="answers[8][order]"/>
    </li>
</ul>