Question

I have a select box and I can move elements up and down with one click at a time, but I have a long list and this takes time. Is their a way if I hold down a button it continues the move the option while the button is pressed down??

<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

You can set an interval when the mousedown event occurs to increment every X seconds to run your functions. Then just cancel the interval on the mouseup event:

$(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);
    });  
});   

Here is a demo: http://jsfiddle.net/NzS6B/

Note that .on() is new as of jQuery 1.7 and in this case is the same as using .bind(): http://api.jquery.com/on