daudiam -8 Junior Poster

I want to reorder the rows by dragging them which is accomplished by the code below, but the void (placeholder) should be of a red color while the drag is taking place - this part is not happening :

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.min.js"></script>
<script>
    $(function() {
        $( "#table tbody" ).sortable({placeholder:'red'});
        $( "#table" ).disableSelection();
    });
</script>
<style>
.red{
    background-color : red;height: 1.5em; line-height: 1.2em;
}
</style>

</head>
<body>
    <table id="table"><tbody>
    <tr>
        <td>
        <label for="name1">Enter name</label>
        <input type="text" id="name1"/>
        </td>
    </tr>
    <tr>
        <td>
        <label for="name2">Enter name</label>
        <input type="text" id="name2"/>
        </td>
    </tr>
    <tr>
        <td>
        <label for="name3">Enter name</label>
        <input type="text" id="name2"/>
        </td>
    </tr>
    </tbody>
    </table>
    <!--
    <ul id="table">
        <li>
        <label for="name1">Enter name</label>
        <input type="text" id="name1"/>
        </li>
        <li>
        <label for="name2">Enter name</label>
        <input type="text" id="name2"/>
        </li>
    </ul>-->
</body>
</html>

Further, if I use list instead of tables (the commented part in the above code) and apply sortable on "#table", the placeholder is showing red, but when the swap has taken place and I haven't lifted my finger off the mouse button yet, the red placeholder is transferred to the new position as background. Is that expected behaviour ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.