CODEWITHSUNDEEP
jqueryformsjquery-uijquery-ui-sortable
Nrc
Nrc

Reputation: 9797

Can I make an input form sortable?

I can use jQuery UI to make an ul sortable. I can do the same with a group of divs. This means that each item can move and change position.
1- It seems that it is not possible to do a form sortable, is that correct? 2- One solution I tried is to put each form input inside a li or a div. But, is this the best way to do it?

JQUERY:

$(function() {
    $('#sortable').sortable();  
});

HTML:

<ul id="sortable">
    <li id="1">item1</li>
    <li id="2">item2</li>
    <li id="3">item3</li>
</ul>

<form id="sortable" action="extern.php" method="post">
<input type="text" id="item1" name="item1" value=""  ><br>
<input type="text" id="item2" name="item2" value=""  ><br>
<input type="text" id="item3" name="item3" value=""  ><br>
</form>

Upvotes: 3

Views: 10738

Answers (3)

NashEquilibro
NashEquilibro

Reputation: 143

Sortable() has an option named cancel with the default: "input, textarea, button, select, option" that prevents sorting if you start on elements matching the selector.

$("#sortableList").sortable({ cancel: null });

And you should be good.

Upvotes: 10

Rahul Gupta
Rahul Gupta

Reputation: 10151

You should wrap the text inputs and corresponding labels into li.

DEMO

HTML:

    <h3>Sortable form elements</h3>
<form id="" action="extern.php" method="post">
<ul id="sortable">
<li class="ui-state-default">
    Fname : <input type="text" id="fname" name="fname" value=""  >
</li>
<li class="ui-state-default">
    Lname : <input type="text" id="lname" name="lname" value=""  >
</li>
<li class="ui-state-default">
    Email : <input type="text" id="email" name="email" value=""  >
</li>    
</ul>
    </form>

JS code:

 $(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

Upvotes: 3

jyrkim
jyrkim

Reputation: 2869

I was able to add sorting behavior when I used TABLE, TR and TD elements within form. However, I needed to add LABEL for handling the sorting, because I wasn't able to use plain INPUT type="text" field for handling the sorting. JSFiddle

$(function () {
    $('form').sortable({
        items: ".sort"
    });
});

HTML

<form id="sortable" action="extern.php" method="post">
    <table>
        <tr class="sort">
            <td>
                <label>1</label>
            </td>
            <td>
                <input type="text" id="Text1" name="item1" value="">
            </td>
        </tr>
        <tr class="sort">
            <td>
                <label>2</label>
            </td>
            <td>
                <input type="text" id="Text2" name="item2" value="">
            </td>
        </tr>
        <tr class="sort">
            <td>
                <label>3</label>
            </td>
            <td>
                <input type="text" id="Text3" name="item3" value="">
            </td>
        </tr>
    </table>
</form>

Upvotes: 0

Related Questions