Question

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

看看这个小提琴：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>

jQuery UI可排序w / list padding - 不能删除数字

1 个答案: