JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<form action="" method="post" class="a">Name :
    <input type="text" class="text" name="name" id="name" />
    <br/>Address :
    <input type="text" class="text" name="address" id="address" />
    <br/>email :
    <input type="text" class="text" name="email" id="email" />
    <br/>
    <input type="hidden" id="image_order" name="image_order" value="order" />
    <ul id="sortable" style="width: 524px;">
        <li id="1" class="ui-state-default">
            <img src="http://www.clker.com/cliparts/S/w/U/U/A/0/pink-tilted-tiara-and-number-19-th.png" width="100" height="90" alt="1" />
        </li>
        <li id="2" class="ui-state-default">
            <img src="http://www.bytebackonline.com/Images/Phone_2.jpg" width="100" height="90" alt="2" />
        </li>
        <li id="3" class="ui-state-default">
            <img src="http://www.picturesof.net/_images/Cartoon_Number_13_Royalty_Free_Clipart_Picture_081026-182853-550048.jpg" width="100" height="90" alt="3" />
        </li>
        <li id="4" class="ui-state-default">
            <img src="http://thumb7.shutterstock.com/thumb_small/359449/161616605/stock-photo-new-year-in-shape-of-gingerbread-isolated-on-white-background-year-number-like-cookies-161616605.jpg" width="100" height="90" alt="4" />
        </li>
    </ul>
    <div style="clear:both;"></div>
    <input name="Submit" value="RE-ORDER" type="submit" />
    <input type="button" id="submit" value="Submit" name="submit" />
</form>

CSS

.sortable {
    list-style:none;
}
li {
    display: inline-block;
    margin: 10px;
    width: 100px;
}

JavaScript

$(function () {
    var validInput, validSort;

    $("#sortable").sortable({
        placeholder: "ui-state-highlight",
        cursor: 'crosshair',
        update: function (event, ui) {
            var order = $("#sortable").sortable("toArray");
            order = JSON.stringify(order);
            correct = JSON.stringify(["4", "3", "2", "1"]);
            if (order == correct) {
                validSort = true
                console.log(':)');
            }
            else {
                validSort = false;
            }
        }
    });

    $("#sortable").disableSelection();


    $('#submit').on('click', function () {
        validInput = true,
            message = '';

        $('form input').each(function () {
            var $this = $(this);

            if (!$this.val()) {
                var inputName = $this.attr('name');
                validInput = false;
                message += 'Please enter your ' + inputName + '\n';
            }
        });

        if (!validInput) {
            alert(message);
            console.log("not valid");
        } else if(!validSort) {
            alert("Sort Not Valid");
            //window.location.href = "http://stackoverflow.com";
            console.log("not valid");
        }
        else {       
            alert("Valid Submit");
            console.log("valid");
        }
        return false;
    });
});