CODEWITHSUNDEEP
jqueryhtml
yogesh suhagiya
yogesh suhagiya

Reputation: 498

Add list items in specific order

I have two boxes, right and left. Right box contains list of items, and left is blank at beginning.

I want to add items from right to left in specific order even if I click randomly on list items.

And I don't want to rearrange all items every-times on left box after click on each list item.

Currently I'm getting following output if I click randomly on list items:

enter image description here

But I want following output:

enter image description here

Following is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Example</title>       
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <style>         
            .container { width: 900px;margin: 0 auto; }
            .container ul li { border: 1px solid #000;border-radius: 5px;list-style: none outside none;margin-bottom: 10px;margin-right: 30px;padding: 5px; }
            .container ul li:hover { background-color: #F2FFF2;cursor: pointer; }
            div.left { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
            div.right { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
        </style>
    </head>
<body>
    <div class="container">
        <div class="left">
            <ul></ul>
        </div>
        <div class="right">
            <ul>
                <li data-order="1" >Item 1</li>
                <li data-order="2" >Item 2</li>
                <li data-order="3" >Item 3</li>
                <li data-order="4" >Item 4</li>
                <li data-order="5" >Item 5</li>
                <li data-order="6" >Item 6</li>
                <li data-order="7" >Item 7</li>
                <li data-order="8" >Item 8</li>
                <li data-order="9" >Item 9</li>
                <li data-order="10" >Item 10</li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function() { 
            jQuery("div.right").delegate("ul li", "click", function() {             
                jQuery("div.left ul").append(jQuery(this));
            });         
        });
    </script>

</body>
</html>

Upvotes: 0

Views: 1759

Answers (4)

T J
T J

Reputation: 43156

$(document).ready(function () {
  $("div.right").delegate("ul li", "click", function () {
    var orderedList = $(".left ul").append(this)
       .find("li").sort(function (a, b) {
           return $(a).data("order") - $(b).data("order");
    });
    $(".left ul").html(orderedList)
  });
});

Demo

Upvotes: 0

Akhil
Akhil

Reputation: 479

You have to somehow sort these elements. I have written the snippet for the same. Its working fine for me.

<script type="text/javascript">
    jQuery(document).ready(function() { 
        jQuery("div.right").delegate("ul li", "click", function() {   
            var currItemDataOrder = parseInt(jQuery(this)[0].getAttribute("data-order"));
            var leftListLength = jQuery("div.left ul li").length;

            if(leftListLength == 0){
                jQuery("div.left ul").append(jQuery(this));
                return;
            }

            for(var i=0;i<leftListLength;i++){
                var dataOrder = parseInt(jQuery("div.left ul li")[i].getAttribute("data-order"));

                if(currItemDataOrder < dataOrder){
                    jQuery(this).insertBefore(jQuery("div.left ul li")[i]);
                    return;
                }

            }

            jQuery("div.left ul").append(jQuery(this));


        });         
    });
</script>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Before you append you can compare the data-order of the current li and find the previous li with the highest number, and then append after that. Try this:

$("div.right").on("click", "ul li", function () {
    var $el = $(this),
        $leftContainer = $("div.left ul"),
        $prev = $leftContainer.find('li').filter(function() {
            return $(this).data('order') < $el.data('order');
        });
    $prev.length ? $prev.last().after($el) : $leftContainer.prepend($el);
});

Example fiddle

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can write a sort function and call it after every addition of li. See below jquery

jQuery(document).ready(function() { 
    jQuery("div.right").delegate("ul li", "click", function() {             
             jQuery("div.left ul").append(jQuery(this));

             // call sort function and get sorted list
             var sortedLis =  jQuery("div.left ul").find(" li").sort(
               function(a,b){
                 var first  = $(a).data('order');
                var second  = $(b).data('order');
               return parseInt(first) - parseInt(second);
              });
             // empty the current list and add sorted list
            jQuery("div.left ul").empty().append(sortedLis);
     });
});

Demo

Upvotes: 1

Related Questions