Question

我有一个选择框，我可以一次一键地上下移动元素，但我有一个很长的列表，这需要时间。如果我按住一个按钮，它会继续按下按钮时继续移动选项吗？

<script type="text/javascript">  
$(document).ready(function() {
    $("#mup")[0].attachEvent("onclick", moveUpItem);
    $("#mdown")[0].attachEvent("onclick", moveDownItem);
});

function moveUpItem()
{
    $('#list option:selected').each(function() {
        $(this).insertBefore($(this).prev());
    });
}

function moveDownItem()
{
    $('#list option:selected').each(function() {
        $(this).insertAfter($(this).next());
    });
}

$(document).ready(function() {
    $("#submit").click(function() {
        $("#list").each(function() {
            $("#list option").attr("selected","selected");
        });
        $("#detColumnSortorder").submit;
    });
});
</script> 


<table>
    <tr align="center">
        <td>
            <select id="list" name="fieldNames" size="15" multiple="multiple" style="width: 250px;">
                <c:forEach var="field" items="${detFields}">
                    <option value="${field.fieldName}">${field.displayName}</option>
                </c:forEach>
            </select>
        </td>
        <td>
            <button id="mup">
                <img src="../images/button_up.gif" alt="Move Column up"/>
            </button>&nbsp;&nbsp;&nbsp;
        </td>
        <td>
            <button id="mdown">
                <img src="../images/button_down.gif" alt="Move Column Down"/>
            </button>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">
            <input name="action" id="submit" type="submit" value="Submit"/>
            <input name="action" type="submit" value="Cancel"/>
        </td>
    </tr>
</table>

Answer 1

您可以设置mousedown事件发生的间隔，每隔X秒递增一次以运行您的功能。然后取消mouseup事件的间隔：

$(document).ready(function() {

    //setup timer variable so we can cancel our intervals
    var timer;

    //bind event handler to up/down buttons for the `mousedown` event
    $("#mup, #mdown").on('mousedown', function () {

        //if the up button is clicked then run the up function every quarter-second
        if (this.id === 'mup') {
            timer = setInterval(moveUpItem, 250);
        } else {

            //otherwise run the down function every quarter-second
            timer = setInterval(moveDownItem, 250);
        }

    //when the user finishes their long-click, canceling the interval will stop the up/down functions from running
    }).on('mouseup', function () {
        clearInterval(timer);
    });  
});

以下是演示：http://jsfiddle.net/NzS6B/

请注意，.on()是jQuery 1.7的新版本，在这种情况下与使用.bind()相同：http://api.jquery.com/on

使用按钮在MultiSelect中对选项进行排序

1 个答案: