Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2008
    Location
    Australia
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Sortable random list (Newbie)

    Hi all and I'll give everyone a thanks in advance... What I'm trying to do is to create a Sortable list that is randomized at the start and when you sort the list correctly you get a massage or a CSS event change? Something like this http://jqueryui.com/sortable/#placeholder

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Quote Originally Posted by doogie73 View Post
    when you sort the list correctly you get a massage or a CSS event change
    do you give the massage or is it some sort of coupon deal?

    But seriously.... have you done anything or are you at square one?

  • #3
    New Coder
    Join Date
    Mar 2008
    Location
    Australia
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    lol yeah it's a Message and not massage and yeah I'm at square one...

  • #4
    New Coder
    Join Date
    Mar 2008
    Location
    Australia
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by doogie73 View Post
    lol yeah it's a Message and not massage and yeah I'm at square one...
    More on this: what I have is a .jpg of the Anatomy of the Head and Neck with numbers at certain points of the image so the correct 1 to 10 list would be

    Code:
    <li>Lips</li>
    <li>Tongue</li>
    <li>Teeth</li>
    <li>Hyoid bone</li>
    <li>Vocal Cords</li>
    <li>Trachea</li>
    <li>Soft Palate</li>
    <li>Uvula</li>
    <li>Epiglottis</li>
    <li>Upper Oesophageal Sphincter</li>
    <li>Oesophagus</li>
    And this would have to be randomized and when back into the right order you get a Well Done!!

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    there's no way I was going to remember the correct order of the body parts, so I used numbers - just modify the "list" array to suit...

    Code:
    <!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Sortable - Drop placeholder</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
      html>body #sortable li { height: 1.5em; line-height: 1.2em; }
      .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
      </style>
    
    </head>
    <body>
     
    <ul id="sortable">
    
    </ul>
     
       <script>
    $(function () {
    
        var list = ["one", "two", "three", "four", "five"];
        var sfl = [].concat(list);
    	
    	function checkIt() {
            var sortstr = "";
            $(".ui-state-default").each(function (index) {
              sortstr += $(this).text();
            });
            if (sortstr == list.join("")) {
              alert("sorted!");
            }
          }
    
        function shuffle(array) {
          var n = array.length,
            k, t;
          if (n == 0) {
            return false
          };
          while (--n) {
            k = Math.floor(Math.random() * (n + 1));
            t = array[n];
            array[n] = array[k];
            array[k] = t;
          }
        }
    
        shuffle(sfl);
    
        $.each(sfl, function (idx, it) {
          $("#sortable").html($("#sortable").html() + '<li class="ui-state-default">' + it + '</li>')
        });
    	
    	checkIt();
    
        $("#sortable").sortable({
          placeholder: "ui-state-highlight",
          stop: checkIt
        });
        $("#sortable").disableSelection();
      });
      </script>
    </body>
    </html>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    And *HOW* are people supposed to manipulate the list to move things into the proper order? Do you expect them to be able to drag-and-drop the items (DIFFICULT, esp. for newbie)? Or would you settle for clicking on an item and then clicking on a "MOVE UP" or "MOVE DOWN" arrow/button? Or (dirt simple) are they just supposed to assign numbers to the items?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Nice, Xelawho, though I think it may actually be simpler in NON-jQuery code.

    But you missed the important part: How does the *USER* move the items around, to get them into order? Or is there something magic in there that I don't understand that does that?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    it's drag n drop, OP, like in the demo link that Dr. Howser posted.

    Looking forward to the simpler vanilla version...

  • #9
    New Coder
    Join Date
    Mar 2008
    Location
    Australia
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Perfect!!! Thank you so much Xelawho!! Good Karma coming your way!!

  • #10
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    A variant with dragable items (3ko with comments !) without jQuery
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    #pge{width:600px;margin:0 auto;}
    div,p {margin:0px;padding:0px;border:0px none;}
    .drg {position:relative;cursor:pointer;}
    </style>
    </head>
    <body>
    <div id="pge">
    	<ol id="idl"></ol>
    	<input type="button" onclick="shuffle()" value="New List">
    </div>
    <script type="text/javascript">
    // Sorted items, number of items, and current list of items 
    var srtItm="Lips,Tongue,Teeth,Hyoid bone,Vocal Cords,Trachea,Soft Palate,Uvula,Epiglottis,Upper Oesophageal Sphincter,Oesophagus".split(',');
    var nmbItm=srtItm.length,crrLst;
    // Define the current list
    function shuffle(){var lst=srtItm.slice(0);
    	crrLst=[];
    	while (lst.length) crrLst[crrLst.length]=lst.splice(Math.floor(Math.random()*lst.length),1);
    	document.getElementById('idl').innerHTML='<li class="drg">'+crrLst.join('</li><li class="drg">')+'</li>';
    }
    shuffle();
    // To make dragable items (with class drg)  
    var drgObj={
    	x:0,y:0,ox:null,oy:null,t:null,dOk:0,
    	ini:function(){document.onmousedown=this.drf;
    	  // To record the positions (posItm with u the moving element)
    		document.onmouseup=function(){var u;this.dOk=0;if (u=this.t) {this.t=null;posItm(u)}}}
    	,drf:function(e){var o=e?e:window.event,t=e?e.target:event.srcElement;
    	  	// Avoid the false nodes (HTML blanks, tabs, carriage return...) 
    		while (t.nodeType!=1) t=t.parentNode;
    		// Go up to a dragable list item (to adapt according to the contents... )
    		while (t.nodeName!='LI' && t.nodeName!='HTML') t=t.parentNode;
    		if (t.nodeName=='HTML' || t.className!="drg") return;
    		  this.t=t;this.dOk=1;
    			if (isNaN(parseInt(this.t.style.left))){this.t.style.left=0}
    			if (isNaN(parseInt(this.t.style.top))){this.t.style.top=0}
    			this.ox=parseInt(this.t.style.left);
    			this.oy=parseInt(this.t.style.top);
    			this.x=o.clientX;
    			this.y=o.clientY;
    			if (o.preventDefault) o.preventDefault();
    			document.onmousemove=drgObj.mvt}
    	,mvt:function(e){
    		var o=window.event? window.event:e;
    		if (this.dOk==1){this.t.style.top=this.oy+o.clientY-this.y+"px";return false}}
    }
    drgObj.ini();
    function posItm(t){var i,j,k,p=t.parentNode,f=p.childNodes,off=[],cls=[],itm=[];
    	// Read their positions and values
    	j=0;for (i=0;i<nmbItm;i++) {off[j]=f[i].offsetTop;itm[j++]=f[i].innerHTML}
    	// Classify them to define the new current list
    	crrLst=[];
    	for (k=0;k<j;k++) {i=k;
    		while (0<i && off[k]<cls[i-1]) {cls[i]=cls[i-1];crrLst[i]=crrLst[--i]} 
    		cls[i]=off[k];crrLst[i]=itm[k]}
    	document.getElementById('idl').innerHTML='<li class="drg">'+crrLst.join('</li><li class="drg">')+'</li>';
    	if (crrLst.toString()==srtItm.toString()) alert("All is Ok !");
    }
    </script>
    </body>
    </html>
    Last edited by 007julien; 07-02-2013 at 10:12 AM. Reason: complement


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •