locked
simple example to sort divs RRS feed

  • Question

  • User1868852945 posted

    The below simple example does not sort the three div elements (class=line)  when the page is displayed.  

    Can someone please advise what I am doing wrong?  Thanks.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>fsdffsdf</title>
    <script src="/js/jquery-2.1.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <style type="text/css">

    .line {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    }
    </style>
    <script src="~/js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    alert("java is working.");

    $(function () { //this is the overall function
    sort_now();

    function sort_now() {
    alert("function sort_now has been called.");
    $('.line').sort;
    };
    });
    </script>

    </head>
    <body>

    <div class="container">
    <div class="line" id="Alice">Alice</div>
    <div class="line" id="Clive">Clive</div>
    <div class="line" id="Berry">Berry</div>
    </div>

    </body>
    </html>

    Monday, November 7, 2016 9:43 PM

Answers

  • User-1823088829 posted

    Based on http://james.padolsey.com/javascript/sorting-elements-with-jquery/

    You can find a workable example on: https://jsfiddle.net/KodiakMx/g3cgxt9k/

    <div class="container">
        <div class="line" id="Alice">Alice</div>
        <div class="line" id="Clive">Clive</div>
        <div class="line" id="Berry">Berry</div>
    </div>
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(function () { //this is the overall function
            $.fn.sortElements = (function () {
                var sort = [].sort;
                return function (comparator, getSortable) {
                    getSortable = getSortable || function () {
                        return this;
                    };
                    var placements = this.map(function () {
                        var sortElement = getSortable.call(this),
                          parentNode = sortElement.parentNode,
                          // Since the element itself will change position, we have
                          // to have some way of storing its original position in
                          // the DOM. The easiest way is to have a 'flag' node:
                          nextSibling = parentNode.insertBefore(
                            document.createTextNode(''),
                            sortElement.nextSibling
                          );
                        return function () {
                            if (parentNode === this) {
                                throw new Error(
                                  "You can't sort elements if any one is a descendant of another."
                                );
                            }
                            // Insert before flag:
                            parentNode.insertBefore(this, nextSibling);
                            // Remove flag:
                            parentNode.removeChild(nextSibling);
                        };
                    });
                    return sort.call(this, comparator).each(function (i) {
                        placements[i].call(getSortable.call(this));
                    });
                };
            })();
    
            $('.line').sortElements(function (a, b) {
                return $(a).text() > $(b).text() ? 1 : -1;
            });
        });
    </script>


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 7, 2016 10:14 PM
  • User-1823088829 posted

    On Eric solution human intervention is necessary. User is the one doing the sorting.
    Basically, it shows the drag and drop functionality. Very helpful for some sceneries.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 6:17 AM

All replies

  • User2053451246 posted

    Is this really the code to your page?  First off, you are referencing the jQuery library twice.  And, according to the example on here you are supposed to have $("#elementname").sortable(); in there somewhere.

    Monday, November 7, 2016 9:59 PM
  • User-183374066 posted

    There is a lot of mistake in your code. Please check follow

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>fsdffsdf</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <style type="text/css">
            .container > div {
                background-color: black;
                color: white;
                text-align: center;
                padding: 5px;
                margin-bottom: 5px;
            }
    
           
        </style>
        <script type="text/javascript">
            $(function () { //this is the overall function
                sort_now();
            });
    
            function sort_now() {
                $('.container').sortable();
            }
        </script>
    
    </head>
    <body>
    
        <div class="container">
            <div class="ui-state-default" id="Alice"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Alice</div>
            <div class="ui-state-default" id="Clive"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Clive</div>
            <div class="ui-state-default" id="Berry"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Berry</div>
        </div>
    
    </body>
    </html>

    See demo here 

    Monday, November 7, 2016 10:01 PM
  • User-1823088829 posted

    Based on http://james.padolsey.com/javascript/sorting-elements-with-jquery/

    You can find a workable example on: https://jsfiddle.net/KodiakMx/g3cgxt9k/

    <div class="container">
        <div class="line" id="Alice">Alice</div>
        <div class="line" id="Clive">Clive</div>
        <div class="line" id="Berry">Berry</div>
    </div>
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(function () { //this is the overall function
            $.fn.sortElements = (function () {
                var sort = [].sort;
                return function (comparator, getSortable) {
                    getSortable = getSortable || function () {
                        return this;
                    };
                    var placements = this.map(function () {
                        var sortElement = getSortable.call(this),
                          parentNode = sortElement.parentNode,
                          // Since the element itself will change position, we have
                          // to have some way of storing its original position in
                          // the DOM. The easiest way is to have a 'flag' node:
                          nextSibling = parentNode.insertBefore(
                            document.createTextNode(''),
                            sortElement.nextSibling
                          );
                        return function () {
                            if (parentNode === this) {
                                throw new Error(
                                  "You can't sort elements if any one is a descendant of another."
                                );
                            }
                            // Insert before flag:
                            parentNode.insertBefore(this, nextSibling);
                            // Remove flag:
                            parentNode.removeChild(nextSibling);
                        };
                    });
                    return sort.call(this, comparator).each(function (i) {
                        placements[i].call(getSortable.call(this));
                    });
                };
            })();
    
            $('.line').sortElements(function (a, b) {
                return $(a).text() > $(b).text() ? 1 : -1;
            });
        });
    </script>


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 7, 2016 10:14 PM
  • User-1838255255 posted

    Hi gunderj,

    According to your description and code, I make a sample, I make a modify based on your code, you can refer to it. Here is all code:

    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <style type="text/css">
            .line {
                background-color: black;
                color: white;
                clear: both;
                text-align: center;
                padding: 5px;
            }
        </style>
    
        <script type="text/javascript">
            alert("java is working.");
            $(function () { //this is the overall function
                sort_now();
                
                function sort_now() {
                    $('.container').sortable();
                };
            });
    
            
        </script>
    </head>
    <body>
        <div class="container">
            <div class="line" id="Alice">Alice</div>
            <div class="line" id="Clive">Clive</div>
            <div class="line" id="Berry">Berry</div>
        </div>
    </body>

    Result:

    If you want show icon in div , you can refer Nasser Malik's reply!

    Best Regards,

    Eric Du

    Tuesday, November 8, 2016 2:45 AM
  • User1868852945 posted

    Thanks Eric,

    Actually I was hoping your solution invoking sorTable() would work as this is the most straight forward.  But, when I paste your code it does not sort - I still get Alice, Clive, then Berry, yet sorted correctly they would be Alice, Berry, then Clive.  I see your video does demonstrate the correct sort, but I would like to see the sotrTable() work correctly?  BTW, the solution marked as answer with $('.line').sortElements(function (a, b) does work.

    I do hope to mark your solution as the better one.  Thanks again sir.

    Tuesday, November 8, 2016 5:29 AM
  • User-1823088829 posted

    On Eric solution human intervention is necessary. User is the one doing the sorting.
    Basically, it shows the drag and drop functionality. Very helpful for some sceneries.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 6:17 AM