Develop Reference

Fixing My 'Save' Button

I have some code that you can select players and assign them teams using a drag and drop technique. Now, is it possible that with the click of the 'Save' button, that it saves which team each player is in. I know localStorage could work but I am not sure how to implement this into my code.
Note: In order for the code to work you have to copy the code and save it as a HTML file on you computer. Then the code will work just fine.
/* VARIABLES YOU COULD MODIFY */
var boxSizeArray = [13,13,13,13,13,13]; // Array indicating how many items there is rooom for in the right column ULs
var arrow_offsetX = -5; // Offset X - position of small arrow
var arrow_offsetY = 0; // Offset Y - position of small arrow
var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow
var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
var verticalSpaceBetweenListItems = 3; // Pixels space between one <li> and next
// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li
var indicateDestionationByUseOfArrow = false; // Display arrow to indicate where object will be dropped(false = use rectangle)
var cloneSourceItems = false; // Items picked from main container will be cloned(i.e. "copy" instead of "cut").
var cloneAllowDuplicates = true; // Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice
/* END VARIABLES YOU COULD MODIFY */
var dragDropTopContainer = false;
var dragTimer = -1;
var dragContentObj = false;
var contentToBeDragged = false; // Reference to dragged <li>
var contentToBeDragged_src = false; // Reference to parent of <li> before drag started
var contentToBeDragged_next = false; // Reference to next sibling of <li> to be dragged
var destinationObj = false; // Reference to <UL> or <LI> where element is dropped.
var dragDropIndicator = false; // Reference to small arrow indicating where items will be dropped
var ulPositionArray = new Array();
var mouseoverObj = false; // Reference to highlighted DIV
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
var indicateDestinationBox = false;
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
}
return returnValue;
}
function cancelEvent()
{
return false;
}
function initDrag(e) // Mouse button is pressed down on a LI
{
if(document.all)e = event;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
dragTimer = 0;
dragContentObj.style.left = e.clientX + sl + 'px';
dragContentObj.style.top = e.clientY + st + 'px';
contentToBeDragged = this;
contentToBeDragged_src = this.parentNode;
contentToBeDragged_next = false;
if(this.nextSibling){
contentToBeDragged_next = this.nextSibling;
if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
}
timerDrag();
return false;
}
function timerDrag()
{
if(dragTimer>=0 && dragTimer<10){
dragTimer++;
setTimeout('timerDrag()',10);
return;
}
if(dragTimer==10){
if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){
newItem = contentToBeDragged.cloneNode(true);
newItem.onmousedown = contentToBeDragged.onmousedown;
contentToBeDragged = newItem;
}
dragContentObj.style.display='block';
dragContentObj.appendChild(contentToBeDragged);
}
}
function moveDragContent(e)
{
if(dragTimer<10){
if(contentToBeDragged){
if(contentToBeDragged_next){
contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
}else{
contentToBeDragged_src.appendChild(contentToBeDragged);
}
}
return;
}
if(document.all)e = event;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
dragContentObj.style.left = e.clientX + sl + 'px';
dragContentObj.style.top = e.clientY + st + 'px';
if(mouseoverObj)mouseoverObj.className='';
destinationObj = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox)indicateDestinationBox.style.display='none';
var x = e.clientX + sl;
var y = e.clientY + st;
var width = dragContentObj.offsetWidth;
var height = dragContentObj.offsetHeight;
var tmpOffsetX = arrow_offsetX;
var tmpOffsetY = arrow_offsetY;
if(!document.all){
tmpOffsetX = arrow_offsetX_firefox;
tmpOffsetY = arrow_offsetY_firefox;
}
for(var no=0;no<ulPositionArray.length;no++){
var ul_leftPos = ulPositionArray[no]['left'];
var ul_topPos = ulPositionArray[no]['top'];
var ul_height = ulPositionArray[no]['height'];
var ul_width = ulPositionArray[no]['width'];
if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
if(noExisting<boxSizeArray[no-1] || no==0){
dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
var clonedItemAllreadyAdded = false;
if(cloneSourceItems && !cloneAllowDuplicates){
for(var liIndex=0;liIndex<subLi.length;liIndex++){
if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;
}
if(clonedItemAllreadyAdded)continue;
}
for(var liIndex=0;liIndex<subLi.length;liIndex++){
var tmpTop = getTopPos(subLi[liIndex]);
if(!indicateDestionationByUseOfArrow){
if(y<tmpTop){
destinationObj = subLi[liIndex];
indicateDestinationBox.style.display='block';
subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
break;
}
}else{
if(y<tmpTop){
destinationObj = subLi[liIndex];
dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
dragDropIndicator.style.display='block';
break;
}
}
}
if(!indicateDestionationByUseOfArrow){
if(indicateDestinationBox.style.display=='none'){
indicateDestinationBox.style.display='block';
ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
}
}else{
if(subLi.length>0 && dragDropIndicator.style.display=='none'){
dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
dragDropIndicator.style.display='block';
}
if(subLi.length==0){
dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
dragDropIndicator.style.display='block';
}
}
if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
mouseoverObj = ulPositionArray[no]['obj'].parentNode;
mouseoverObj.className='mouseover';
return;
}
}
}
}
/* End dragging
Put <LI> into a destination or back to where it came from.
*/
function dragDropEnd(e)
{
if(dragTimer==-1)return;
if(dragTimer<10){
dragTimer = -1;
return;
}
dragTimer = -1;
if(document.all)e = event;
if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){
contentToBeDragged.parentNode.removeChild(contentToBeDragged);
}else{
if(destinationObj){
if(destinationObj.tagName=='UL'){
destinationObj.appendChild(contentToBeDragged);
}else{
destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
}
mouseoverObj.className='';
destinationObj = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox){
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
contentToBeDragged = false;
return;
}
if(contentToBeDragged_next){
contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
}else{
contentToBeDragged_src.appendChild(contentToBeDragged);
}
}
contentToBeDragged = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox){
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
mouseoverObj = false;
}
/*
Preparing data to be saved
*/
function saveDragDropNodes()
{
var saveString = "";
var uls = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<uls.length;no++){ // LOoping through all <ul>
var lis = uls[no].getElementsByTagName('LI');
for(var no2=0;no2<lis.length;no2++){
if(saveString.length>0)saveString = saveString + ";";
saveString = saveString + uls[no].id + '|' + lis[no2].id;
}
}
document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';
}
function initDragDropScript()
{
dragContentObj = document.getElementById('dragContent');
dragDropIndicator = document.getElementById('dragDropIndicator');
dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
document.documentElement.onselectstart = cancelEvent;;
var listItems = dragDropTopContainer.getElementsByTagName('LI'); // Get array containing all <LI>
var itemHeight = false;
for(var no=0;no<listItems.length;no++){
listItems[no].onmousedown = initDrag;
listItems[no].onselectstart = cancelEvent;
if(!itemHeight)itemHeight = listItems[no].offsetHeight;
if(MSIE && navigatorVersion/1<6){
listItems[no].style.cursor='hand';
}
}
var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
var uls = mainContainer.getElementsByTagName('UL');
itemHeight = itemHeight + verticalSpaceBetweenListItems;
for(var no=0;no<uls.length;no++){
uls[no].style.height = itemHeight * boxSizeArray[no] + 'px';
}
var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
var itemBox = leftContainer.getElementsByTagName('UL')[0];
document.documentElement.onmousemove = moveDragContent; // Mouse move event - moving draggable div
document.documentElement.onmouseup = dragDropEnd; // Mouse move event - moving draggable div
var ulArray = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<ulArray.length;no++){
ulPositionArray[no] = new Array();
ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);
ulPositionArray[no]['top'] = getTopPos(ulArray[no]);
ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
ulPositionArray[no]['height'] = ulArray[no].clientHeight;
ulPositionArray[no]['obj'] = ulArray[no];
}
if(!indicateDestionationByUseOfArrow){
indicateDestinationBox = document.createElement('LI');
indicateDestinationBox.id = 'indicateDestination';
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
}
window.onload = initDragDropScript;
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
background-color:#E2EBED;
}
#footer{
height:30px;
vertical-align:middle;
text-align:right;
clear:both;
padding-right:3px;
background-color:#317082;
margin-top:2px;
width:1250px;
}
#footer form{
margin:0px;
margin-top:2px;
}
#dhtmlgoodies_dragDropContainer{ /* Main container for this script */
width:100%;
height:2250px;
border:1px solid #317082;
background-color:#FFF;
-moz-user-select:none;
}
#dhtmlgoodies_dragDropContainer ul{ /* General rules for all <ul> */
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
padding:2px;
}
#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */
list-style-type:none;
height:20px;
background-color:#EEE;
border:1px solid #000;
padding:2px;
margin-bottom:2px;
cursor:pointer;
font-size:0.9em;
}
li#indicateDestination{ /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
border:1px dotted #600;
background-color:#FFF;
}
/* LEFT COLUMN CSS */
div#dhtmlgoodies_listOfItems{ /* Left column "Available students" */
float:left;
padding-left:10px;
padding-right:10px;
/* CSS HACK */
width: 180px; /* IE 5.x */
width/* */:/**/160px; /* Other browsers */
width: /**/160px;
}
#dhtmlgoodies_listOfItems ul{ /* Left(Sources) column <ul> */
height:2184px;
}
div#dhtmlgoodies_listOfItems div{
border:1px solid #999;
}
div#dhtmlgoodies_listOfItems div ul{ /* Left column <ul> */
margin-left:10px; /* Space at the left of list - the arrow will be positioned there */
}
#dhtmlgoodies_listOfItems div p{ /* Heading above left column */
margin:0px;
font-weight:bold;
padding-left:12px;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}
/* END LEFT COLUMN CSS */
#dhtmlgoodies_dragDropContainer .mouseover{ /* Mouse over effect DIV box in right column */
background-color:#E2EBED;
border:1px solid #317082;
}
/* Start main container CSS */
div#dhtmlgoodies_mainContainer{ /* Right column DIV */
width:1096px;
float:left;
}
#dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */
float:left;
margin-right:10px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;
/* CSS HACK */
width: 172px; /* IE 5.x */
width/* */:/**/170px; /* Other browsers */
width: /**/170px;
}
#dhtmlgoodies_mainContainer div ul{
margin-left:10px;
}
#dhtmlgoodies_mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}
#dhtmlgoodies_mainContainer ul{ /* Small box in right column ,i.e <ul> */
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;
}
#dragContent{ /* Drag container */
position:absolute;
width:150px;
height:20px;
display:none;
margin:0px;
padding:0px;
z-index:2000;
}
#dragDropIndicator{ /* DIV for the small arrow */
position:absolute;
width:7px;
height:10px;
display:none;
z-index:1000;
margin:0px;
padding:0px;
}
</style>
<style type="text/css" media="print">
div#dhtmlgoodies_listOfItems{
display:none;
}
body{
background-color:#FFF;
}
img{
display:none;
}
#dhtmlgoodies_dragDropContainer{
border:0px;
width:100%;
}
p{
margin-bottom:0px;
}
<div id="dhtmlgoodies_dragDropContainer">
<div id="topBar">
<img src="/images/heading3.gif" />
</div>
<div id="dhtmlgoodies_listOfItems">
<div>
<p>
Available players
</p>
<ul id="allItems">
<li id="node7">Player A
</li>
<li id="node8">Player B
</li>
<li id="node9">Player C
</li>
<li id="node10">Player D
</li>
<li id="node11">Player E
</li>
<li id="node12">Player F
</li>
<li id="node13">Player G
</li>
<li id="node14">Player H
</li>
<li id="node15">Player I
</li>
<li id="node16">Player J
</li>
<li id="node17">Player K
</li>
<li id="node18">Player L
</li>
<li id="node19">Player M
</li>
<li id="node20">Player N
</li>
<li id="node21">Player O
</li>
<li id="node22">Player P
</li>
<li id="node23">Player Q
</li>
<li id="node24">Player R
</li>
<li id="node25">Player S
</li>
<li id="node26">Player T
</li>
<li id="node27">Player U
</li>
<li id="node28">Player V
</li>
<li id="node29">Player W
</li>
<li id="node30">Player X
</li>
<li id="node31">Player Y
</li>
<li id="node32">Player Z
</li>
<li id="node33">Player AA
</li>
<li id="node34">Player AB
</li>
<li id="node35">Player AC
</li>
<li id="node36">Player AD
</li>
<li id="node37">Player AE
</li>
<li id="node38">Player AF
</li>
<li id="node39">Player AG
</li>
<li id="node40">Player AH
</li>
<li id="node41">Player AI
</li>
<li id="node42">Player AJ
</li>
<li id="node43">Player AK
</li>
<li id="node44">Player AL
</li>
<li id="node45">Player AM
</li>
<li id="node46">Player AN
</li>
<li id="node47">Player AO
</li>
<li id="node48">Player AP
</li>
<li id="node49">Player AQ
</li>
<li id="node50">Player AR
</li>
<li id="node51">Player AS
</li>
<li id="node52">Player AT
</li>
<li id="node53">Player AU
</li>
<li id="node54">Player AV
</li>
<li id="node55">Player AW
</li>
<li id="node56">Player AX
</li>
<li id="node57">Player AY
</li>
<li id="node58">Player AZ
</li>
<li id="node59">Player BA
</li>
<li id="node60">Player BB
</li>
<li id="node61">Player BC
</li>
<li id="node62">Player BD
</li>
<li id="node63">Player BE
</li>
<li id="node64">Player BF
</li>
<li id="node65">Player BG
</li>
<li id="node66">Player BH
</li>
<li id="node67">Player BI
</li>
<li id="node68">Player BJ
</li>
<li id="node69">Player BK
</li>
<li id="node70">Player BL
</li>
<li id="node71">Player BM
</li>
<li id="node72">Player BN
</li>
<li id="node73">Player BO
</li>
<li id="node74">Player BP
</li>
<li id="node75">Player BQ
</li>
<li id="node76">Player BR
</li>
<li id="node77">Player BS
</li>
<li id="node78">Player BT
</li>
<li id="node79">Player BU
</li>
<li id="node80">Player BV
</li>
<li id="node81">Player BW
</li>
<li id="node82">Player BX
</li>
<li id="node83">Player BY
</li>
<li id="node84">Player BZ
</li>
</ul>
</div>
</div>
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<p>
Team A
</p>
<ul id="box1">
<li id="node1">Captain A
</li>
</ul>
</div>
<div>
<p>
Team B
</p>
<ul id="box2">
<li id="node2">Captain B
</li>
</ul>
</div>
<div>
<p>
Team C
</p>
<ul id="box3">
<li id="node3">Captain C
</li>
</ul>
</div>
<div>
<p>
Team D
</p>
<ul id="box4">
<li id="node4">Captain D
</li>
</ul>
</div>
<div>
<p>
Team E
</p>
<ul id="box5">
<li id="node5">Captain E
</li>
</ul>
</div>
<div>
<p>
Team F
</p>
<ul id="box6">
<li id="node6">Captain F
</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<form action="aPage.html" method="post">
<input type="button" onclick="saveDragDropNodes()" value="Save" />
</form>
</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator">
<img src="images/insert.gif" />
</div>
<div id="saveContent"></div>

Basically you just need to Set variable with
localStorage.testString = 'Hello';
And recall with
var result = localStorage.testString;

Thank you for the jsfiddle. This is obviously the wrong way to do it, you want to create an array structure and save it like that, but this just gives you an idea what is possible.
https://jsfiddle.net/xwq8995t/2/
$(function(){
$('#save_button').click(function(){
localStorage.setItem('dhtmlgoodies_listOfItems', $('#dhtmlgoodies_listOfItems').html());
localStorage.setItem('dhtmlgoodies_mainContainer', $('#dhtmlgoodies_mainContainer').html());
});
});
function loadSaved() {
var dhtmlgoodies_listOfItems = localStorage.getItem('dhtmlgoodies_listOfItems');
var dhtmlgoodies_mainContainer = localStorage.getItem('dhtmlgoodies_mainContainer');
if(dhtmlgoodies_listOfItems) {
$('#dhtmlgoodies_listOfItems').html(dhtmlgoodies_listOfItems);
}
if(dhtmlgoodies_mainContainer) {
$('#dhtmlgoodies_mainContainer').html(dhtmlgoodies_mainContainer);
}
initDragDropScript();
}

If you wish to save data you need to use a server side language such as PHP to achieve that; I don't believe that HTML can do this since it uses Shadow Root or also know as Shadow Dom to replicate the code in the browser and the browser has no permission to amend local storage file.

Randomly assign list items to Columns

I have a drag and drop program, the code is down below. Now, I have been trying for a while to get my 'Simulate to the next round!' to take .node7, .node8, .node9, .node10, .node11, & .node12 id's of some of the li's and randomly assign one to each column, or 'Team'. Anything would help! Here is a JSFiddle, and here is a snippet:
/* VARIABLES YOU COULD MODIFY */
var boxSizeArray = [14,14,14,14,14,14]; // Array indicating how many items there is rooom for in the right column ULs
var arrow_offsetX = -5; // Offset X - position of small arrow
var arrow_offsetY = 0; // Offset Y - position of small arrow
var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow
var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
var verticalSpaceBetweenListItems = 3; // Pixels space between one <li> and next
// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li
var indicateDestionationByUseOfArrow = false; // Display arrow to indicate where object will be dropped(false = use rectangle)
var cloneSourceItems = false; // Items picked from main container will be cloned(i.e. "copy" instead of "cut").
var cloneAllowDuplicates = true; // Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice
/* END VARIABLES YOU COULD MODIFY */
var dragDropTopContainer = false;
var dragTimer = -1;
var dragContentObj = false;
var contentToBeDragged = false; // Reference to dragged <li>
var contentToBeDragged_src = false; // Reference to parent of <li> before drag started
var contentToBeDragged_next = false; // Reference to next sibling of <li> to be dragged
var destinationObj = false; // Reference to <UL> or <LI> where element is dropped.
var dragDropIndicator = false; // Reference to small arrow indicating where items will be dropped
var ulPositionArray = new Array();
var mouseoverObj = false; // Reference to highlighted DIV
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
var indicateDestinationBox = false;
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
}
return returnValue;
}
function cancelEvent()
{
return false;
}
function initDrag(e) // Mouse button is pressed down on a LI
{
if(document.all)e = event;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
dragTimer = 0;
dragContentObj.style.left = e.clientX + sl + 'px';
dragContentObj.style.top = e.clientY + st + 'px';
contentToBeDragged = this;
contentToBeDragged_src = this.parentNode;
contentToBeDragged_next = false;
if(this.nextSibling){
contentToBeDragged_next = this.nextSibling;
if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
}
timerDrag();
return false;
}
function timerDrag()
{
if(dragTimer>=0 && dragTimer<10){
dragTimer++;
setTimeout('timerDrag()',10);
return;
}
if(dragTimer==10){
if(cloneSourceItems && contentToBeDragged.parentNode.id=='Available Players'){
newItem = contentToBeDragged.cloneNode(true);
newItem.onmousedown = contentToBeDragged.onmousedown;
contentToBeDragged = newItem;
}
dragContentObj.style.display='block';
dragContentObj.appendChild(contentToBeDragged);
}
}
function moveDragContent(e)
{
if(dragTimer<10){
if(contentToBeDragged){
if(contentToBeDragged_next){
contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
}else{
contentToBeDragged_src.appendChild(contentToBeDragged);
}
}
return;
}
if(document.all)e = event;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
dragContentObj.style.left = e.clientX + sl + 'px';
dragContentObj.style.top = e.clientY + st + 'px';
if(mouseoverObj)mouseoverObj.className='';
destinationObj = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox)indicateDestinationBox.style.display='none';
var x = e.clientX + sl;
var y = e.clientY + st;
var width = dragContentObj.offsetWidth;
var height = dragContentObj.offsetHeight;
var tmpOffsetX = arrow_offsetX;
var tmpOffsetY = arrow_offsetY;
if(!document.all){
tmpOffsetX = arrow_offsetX_firefox;
tmpOffsetY = arrow_offsetY_firefox;
}
for(var no=0;no<ulPositionArray.length;no++){
var ul_leftPos = ulPositionArray[no]['left'];
var ul_topPos = ulPositionArray[no]['top'];
var ul_height = ulPositionArray[no]['height'];
var ul_width = ulPositionArray[no]['width'];
if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
if(noExisting<boxSizeArray[no-1] || no==0){
dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
var clonedItemAllreadyAdded = false;
if(cloneSourceItems && !cloneAllowDuplicates){
for(var liIndex=0;liIndex<subLi.length;liIndex++){
if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;
}
if(clonedItemAllreadyAdded)continue;
}
for(var liIndex=0;liIndex<subLi.length;liIndex++){
var tmpTop = getTopPos(subLi[liIndex]);
if(!indicateDestionationByUseOfArrow){
if(y<tmpTop){
destinationObj = subLi[liIndex];
indicateDestinationBox.style.display='block';
subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
break;
}
}else{
if(y<tmpTop){
destinationObj = subLi[liIndex];
dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
dragDropIndicator.style.display='block';
break;
}
}
}
if(!indicateDestionationByUseOfArrow){
if(indicateDestinationBox.style.display=='none'){
indicateDestinationBox.style.display='block';
ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
}
}else{
if(subLi.length>0 && dragDropIndicator.style.display=='none'){
dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
dragDropIndicator.style.display='block';
}
if(subLi.length==0){
dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
dragDropIndicator.style.display='block';
}
}
if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
mouseoverObj = ulPositionArray[no]['obj'].parentNode;
mouseoverObj.className='mouseover';
return;
}
}
}
}
/* End dragging
Put <LI> into a destination or back to where it came from.
*/
function dragDropEnd(e)
{
if(dragTimer==-1)return;
if(dragTimer<10){
dragTimer = -1;
return;
}
dragTimer = -1;
if(document.all)e = event;
if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='Available Players' || destinationObj.parentNode.id=='Available Players')))){
contentToBeDragged.parentNode.removeChild(contentToBeDragged);
}else{
if(destinationObj){
if(destinationObj.tagName=='UL'){
destinationObj.appendChild(contentToBeDragged);
}else{
destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
}
mouseoverObj.className='';
destinationObj = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox){
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
contentToBeDragged = false;
return;
}
if(contentToBeDragged_next){
contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
}else{
contentToBeDragged_src.appendChild(contentToBeDragged);
}
}
contentToBeDragged = false;
dragDropIndicator.style.display='none';
if(indicateDestinationBox){
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
mouseoverObj = false;
}
/*
Preparing data to be saved
*/
function saveDragDropNodes()
{
var saveString = "";
var uls = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<uls.length;no++){ // LOoping through all <ul>
var lis = uls[no].getElementsByTagName('LI');
for(var no2=0;no2<lis.length;no2++){
if(saveString.length>0)saveString = saveString + ";";
saveString = saveString + uls[no].id + '|' + lis[no2].id;
}
}
document.getElementById('saveContent').innerHTML = '<h1 align="center">Ready to save the following team rosters:<\/h1> ' + saveString.replace(/;/g,'<br>');
}
function initDragDropScript()
{
dragContentObj = document.getElementById('dragContent');
dragDropIndicator = document.getElementById('dragDropIndicator');
dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
document.documentElement.onselectstart = cancelEvent;;
var listItems = dragDropTopContainer.getElementsByTagName('LI'); // Get array containing all <LI>
var itemHeight = false;
for(var no=0;no<listItems.length;no++){
listItems[no].onmousedown = initDrag;
listItems[no].onselectstart = cancelEvent;
if(!itemHeight)itemHeight = listItems[no].offsetHeight;
if(MSIE && navigatorVersion/1<6){
listItems[no].style.cursor='hand';
}
}
var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
var uls = mainContainer.getElementsByTagName('UL');
itemHeight = itemHeight + verticalSpaceBetweenListItems;
for(var no=0;no<uls.length;no++){
uls[no].style.height = itemHeight * boxSizeArray[no] + 'px';
}
var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
var itemBox = leftContainer.getElementsByTagName('UL')[0];
document.documentElement.onmousemove = moveDragContent; // Mouse move event - moving draggable div
document.documentElement.onmouseup = dragDropEnd; // Mouse move event - moving draggable div
var ulArray = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<ulArray.length;no++){
ulPositionArray[no] = new Array();
ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);
ulPositionArray[no]['top'] = getTopPos(ulArray[no]);
ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
ulPositionArray[no]['height'] = ulArray[no].clientHeight;
ulPositionArray[no]['obj'] = ulArray[no];
}
if(!indicateDestionationByUseOfArrow){
indicateDestinationBox = document.createElement('LI');
indicateDestinationBox.id = 'indicateDestination';
indicateDestinationBox.style.display='none';
document.body.appendChild(indicateDestinationBox);
}
}
window.onload = initDragDropScript;
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "Draft_Data.html";
a.href = "data:text/html," + document.getElementById("saveContent").innerHTML;
a.click();
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
background-color:#E2EBED;
}
#footer{
height:30px;
vertical-align:middle;
text-align:right;
clear:both;
padding-right:3px;
background-color:#317082;
margin-top:2px;
width:1250px;
}
#footer form{
margin:0px;
margin-top:2px;
}
#dhtmlgoodies_dragDropContainer{ /* Main container for this script */
width:250%;
height:2250px;
border:1px solid #317082;
background-color:#FFF;
-moz-user-select:none;
}
#dhtmlgoodies_dragDropContainer ul{ /* General rules for all <ul> */
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
padding:2px;
}
#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */
list-style-type:none;
height:20px;
background-color:#EEE;
border:1px solid #000;
padding:2px;
margin-bottom:2px;
cursor:pointer;
font-size:0.9em;
}
li#indicateDestination{ /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
border:1px dotted #600;
background-color:#FFF;
}
/* LEFT COLUMN CSS */
div#dhtmlgoodies_listOfItems{ /* Left column "Available students" */
float:left;
padding-left:10px;
padding-right:10px;
/* CSS HACK */
width: 180px; /* IE 5.x */
width/* */:/**/160px; /* Other browsers */
width: /**/160px;
}
#dhtmlgoodies_listOfItems ul{ /* Left(Sources) column <ul> */
height:2184px;
}
div#dhtmlgoodies_listOfItems div{
border:1px solid #999;
}
div#dhtmlgoodies_listOfItems div ul{ /* Left column <ul> */
margin-left:10px; /* Space at the left of list - the arrow will be positioned there */
}
#dhtmlgoodies_listOfItems div p{ /* Heading above left column */
margin:0px;
font-weight:bold;
padding-left:12px;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}
/* END LEFT COLUMN CSS */
#dhtmlgoodies_dragDropContainer .mouseover{ /* Mouse over effect DIV box in right column */
background-color:#E2EBED;
border:1px solid #317082;
}
/* Start main container CSS */
div#dhtmlgoodies_mainContainer{ /* Right column DIV */
width:1096px;
float:left;
}
#dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */
float:left;
margin-right:10px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;
/* CSS HACK */
width: 172px; /* IE 5.x */
width/* */:/**/170px; /* Other browsers */
width: /**/170px;
}
#dhtmlgoodies_mainContainer div ul{
margin-left:10px;
}
#dhtmlgoodies_mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}
#dhtmlgoodies_mainContainer ul{ /* Small box in right column ,i.e <ul> */
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;
}
#dragContent{ /* Drag container */
position:absolute;
width:150px;
height:20px;
display:none;
margin:0px;
padding:0px;
z-index:2000;
}
#dragDropIndicator{ /* DIV for the small arrow */
position:absolute;
width:7px;
height:10px;
display:none;
z-index:1000;
margin:0px;
padding:0px;
}
</style>
<style type="text/css" media="print">
div#dhtmlgoodies_listOfItems{
display:none;
}
body{
background-color:#FFF;
}
img{
display:none;
}
#dhtmlgoodies_dragDropContainer{
border:0px;
width:100%;
}
p{
margin-bottom:0px;
}
<div id="footer">
<form action="aPage.html" method="post">
<input type="button" value="Simulate to next round!" /><input type="button" onclick="saveDragDropNodes();download()" value="Download" />
</form>
</div>
<div id="dhtmlgoodies_dragDropContainer">
<div id="dhtmlgoodies_listOfItems">
<div>
<p>
Available Players
</p>
<ul id="Available Players">
<li id="node7">Player A
</li>
<li id="node8">Player B
</li>
<li id="node9">Player C
</li>
<li id="node10">Player D
</li>
<li id="node11">Player E
</li>
<li id="node12">Player F
</li>
<li id="node13">Player G
</li>
<li id="node14">Player H
</li>
<li id="node15">Player I
</li>
<li id="node16">Player J
</li>
<li id="node17">Player K
</li>
<li id="node18">Player L
</li>
<li id="node19">Player M
</li>
<li id="node20">Player N
</li>
<li id="node21">Player O
</li>
<li id="node22">Player P
</li>
<li id="node23">Player Q
</li>
<li id="node24">Player R
</li>
<li id="node25">Player S
</li>
<li id="node26">Player T
</li>
<li id="node27">Player U
</li>
<li id="node28">Player V
</li>
<li id="node29">Player W
</li>
<li id="node30">Player X
</li>
<li id="node31">Player Y
</li>
<li id="node32">Player Z
</ul>
</div>
</div>
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<p>
Team A
</p>
<ul id="box1">
<li id="node1">Captain A
</li>
</ul>
</div>
<div>
<p>
Team B
</p>
<ul id="box2">
<li id="node2">Captain B
</li>
</ul>
</div>
<div>
<p>
Team C
</p>
<ul id="box3">
<li id="node3">Captain C
</li>
</ul>
</div>
<div>
<p>
Team D
</p>
<ul id="box4">
<li id="node4">Captain D
</li>
</ul>
</div>
<div>
<p>
Team E
</p>
<ul id="box5">
<li id="node5">Captain E
</li>
</ul>
</div>
<div>
<p>
Team F
</p>
<ul id="box6">
<li id="node6">Captain F
</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<form action="aPage.html" method="post">
<input type="button" value="Simulate to next round!" /><input type="button" onclick="saveDragDropNodes();download()" value="Download" />
</form>
</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator">
<img src="images/insert.gif" />
</div>
<div id="saveContent" align="center"></div>

Implying that you change id="Available Players" to id="AvailablePlayers", that should work:
function shufflePlayers(amount=6) {
var box = 1;
var rnd = 0;
for(var i = 0; i < amount; i++) {
rnd = Math.floor((Math.random()*$('#AvailablePlayers li').length));
$('#AvailablePlayers').children('li').eq(rnd).appendTo('#box'+box);
if(box == 6) {
box = 1;
} else {
box++;
}
}
}
EDIT: Fixed the function being able to shuffle >6 players, also moved the declarations outside of the loop.
EDIT 2: Here's a version that accepts an array of team container IDs as a parameter:
function shufflePlayers(amount=6, teamsID=['box1', 'box2', 'box3', 'box4', 'box5', 'box6']) {
var box = 0;
var rnd = 0;
for(var i = 0; i < amount; i++) {
rnd = Math.floor((Math.random()*$('#AvailablePlayers li').length));
$('#AvailablePlayers').children('li').eq(rnd).appendTo('#'+teamsID[box]);
if(box == teamsID.length) {
box = 0;
} else {
box++;
}
}
}
As is, this modified function will work without any parameters, but if you change the team boxes ids, then you need to pass them as an array: shufflePlayers(6, ['Red', 'Green', 'Blue', 'Cyan', 'Magenta', 'Yellow'])
EDIT 3: Another version of the function, this time it only picks random players from the first set with the size of amount (default is 6).
function shufflePlayers(amount=6, teamsID=['box1', 'box2', 'box3', 'box4', 'box5', 'box6']) {
var box = 0;
var rnd = 0;
for(var i = 0; i < amount; i++) {
rnd = Math.floor((Math.random()*(amount-i)));
$('#AvailablePlayers').children('li').eq(rnd).appendTo('#'+teamsID[box]);
if(box == teamsID.length) {
box = 0;
} else {
box++;
}
}
}

How to loop a JavaScript nodelist and apply a JavaScript style?

How can I get the JavaScript loop associated with the liList variable to effect the DOM whist not over-riding any other styles?
I would like my menu items to still be orange and for the first list item to hold onto the styleAbbr variable that was created in JavaScript.
//JavaScript style to effect HTML abbr
var styleAbbr = document.createElement('style');
styleAbbr.type = 'text/css';
styleAbbr.innerHTML = '.myAbbr {font-style: italic; letter-spacing: .4em;}';
document.getElementsByTagName('head')[0].appendChild(styleAbbr);
document.querySelector('abbr').className = 'myAbbr';
//the JavaScript for the loop
var msg = '';
var i = 0;
var liList = document.querySelectorAll('li.menuItem');
if (i < liList.length) {
for (var i = 0; i < liList.length; i++) {
//liList[i].textContent gets the text form the li element in the DOM
var listWording = liList[i].textContent;
//liList.innerHTML applies my style and pushes listWording into the DOM
msg += '<li style="background: red; margin-top: 10px;">'
+ listWording
+ '</li>';
}
}
//I believe that the issue is that .innerHTML = msg.
document.getElementById('mMain').innerHTML = msg;
ul {
font-size: 1.4em;
list-style: none;
}
ul li a {
text-decoration: none;
color: #e69b1e;
}
<ul id="mMain">
<li class="menuItem">
<a href="#">
<abbr title="HyperText Markup Language">HTML</abbr>
</a>
</li>
<li class="menuItem">
About
</li>
<li class="menuItem">
Gallery
</li>
<li class="menuItem">
Contact
</li>
</ul>
Ideally I would like to have my JavaScript style in its own variable and loop that into the "menuItem" class whilst not effecting any other predefined class's however I am not quite sure how I would call that variable into a loop.
var menuItemClass = document.createElement('style');
menuItemClass.type = 'text/css';
menuItemClass.innerHTML = '.menuStyle {background: red; margin-top: 10px;}';
document.getElementsByTagName('head')[0].appendChild(menuItemClass);
Im also aware I could have a class in my CSS do all of this and then reference that.
However I am interested how this can be achieved in JavaScript.
Thank you.

I found a solution to referencing my JavaScript defined style.
var styleAbbr = document.createElement('style');
styleAbbr.type = 'text/css';
styleAbbr.innerHTML = '.myAbbr {font-style: italic; letter-spacing: .4em;}';
document.getElementsByTagName('head')[0].appendChild(styleAbbr);
document.querySelector('abbr').className = 'myAbbr';
var menuItemClass = document.createElement('style');
menuItemClass.type = 'text/css';
menuItemClass.innerHTML = '.menuStyle {background: red; margin-top: 10px;}';
document.getElementsByTagName('head')[0].appendChild(menuItemClass);
var msg = '';
var i = 0;
var liList = document.querySelectorAll('li.menuItem');
if (i < liList.length) {
for (var i = 0; i < liList.length; i++) {
liList[i].className = 'menuStyle';
}
}
ul li {
font-size: 1.4em;
list-style: none;
}
ul li a {
text-decoration: none;
color: #e69b1e;
}
<ul id="mMain">
<li class="menuItem">
<a href="#">
<abbr title="HyperText Markup Language">HTML</abbr>
</a>
</li>
<li class="menuItem">
About
</li>
<li class="menuItem">
Gallery
</li>
<li class="menuItem">
Contact
</li>
</ul>

I am answering how to add class to each li element created dynamically without effecting predefined. So create class according to the menu item innerText and take background color for the class from array defined colors
//JavaScript style to effect HTML abbr
var styleAbbr = document.createElement('style');
styleAbbr.type = 'text/css';
styleAbbr.innerHTML = '.myAbbr {font-style: italic; letter-spacing: .4em;}';
document.getElementsByTagName('head')[0].appendChild(styleAbbr);
document.querySelector('abbr').className = 'myAbbr';
//the JavaScript for the loop
var msg = '';
var i = 0;
var liList = document.querySelectorAll('li.menuItem');
//defining background colours
var colors = ['red', 'orange', 'green', 'brown', 'blue'];
var j = 0;
if (i < liList.length) {
for (var i = 0; i < liList.length; i++) {
//creating class as the innerText content
if (j >= colors.length) {
j = 0
}
var menuItemClass = document.createElement('style');
menuItemClass.type = 'text/css';
menuItemClass.innerHTML = '.' + liList[i].innerText + ' {background: ' + colors[j] + '; margin-top: 10px;}';
document.getElementsByTagName('head')[0].appendChild(menuItemClass);
j++;
//liList[i].textContent gets the text form the li element in the DOM
var listWording = liList[i].textContent;
//liList.innerHTML applies my style and pushes listWording into the DOM
if (i == 0) {
msg += liList.innerHTML =
'<li class="myAbbr ' + listWording + '">' +
listWording +
'</li>';
} else {
msg += liList.innerHTML =
'<li class=" ' + listWording + '">' +
listWording +
'</li>';
}
}
}
//I believe that the issue is that .innerHTML = msg.
document.getElementById('mMain').innerHTML = msg;
ul {
font-size: 1.4em;
list-style: none;
}
ul li a {
text-decoration: none;
color: #e69b1e;
}
<ul id="mMain">
<li class="menuItem">
<a href="#">
<abbr title="HyperText Markup Language">HTML</abbr>
</a>
</li>
<li class="menuItem">
About
</li>
<li class="menuItem">
Gallery
</li>
<li class="menuItem">
Contact
</li>
</ul>

How to enable the active item to selected in dropdown in the pages when its onload

converting this UL to dropdown
<ul class="list-group showdiv">
<li class="list-group-item {{{ (Request::is('developmentService') ? 'active' : '') }}}">Bespoke Software Development</li>
<li class="list-group-item {{{ (Request::is('UserExperienceService') ? 'active' : '') }}}">User Experience Design</li>
<li class="list-group-item {{{ (Request::is('StaffService') ? 'active' : '') }}}">Staff Augmentation</li>
<li class="list-group-item {{{ (Request::is('TestingService') ? 'active' : '') }}}">Testing and Validation</li>
<li class="list-group-item {{{ (Request::is('GamingService') ? 'active' : '') }}}">Gaming</li>
</ul>
To convert Dropdown
Converting ul by this script.
<script type="text/javascript"> $(function() {
$('ul.showdiv').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
$('select').on('change', function (e) {
var valueSelected = this.value;
window.location.href = valueSelected; }); });
How to enable the "active" item to "selected=true" in dropdown in the pages.
** its always getting selected the first item in the dropdown list

Maybe something like this works: (inside the each loop)
$('ul.showdiv').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
if($(this).children().hasClass('active')){
$option.prop('selected', true);
}
$select.append($option);
});
$(this).replaceWith($select);
});

What about something like this? I know it changes your code a bit, but it works. Just change the filenames accordingly.
Example of a filename that should be used: "userExperienceDesign.html" in order to make sure that the navigation menu works correctly
Just erase the following line when running it from your own files: filename = "item3.html";
jsfiddle
//URL to id to select active link
var href = window.location.href;
var filename = href.split('/').pop();
filename = "item3.html";
//Example of a filename that should be used: "staffAugmentation.html" in order to make sure that the navigation menu works correctly
filename = filename.replace(/\..+$/, '');
$("#nav_" + filename).children("*").addClass("active");
if ($("#nav_" + filename).parent().parent("li")) {
$("#nav_" + filename).parent().parent().children("*").addClass("active");
}
//Fix subMenu widths: min width same as parent nav item and if right side of subMenu item surpasses parent ul's width, left offset compensates
var navWidth = $("#nav").width();
var navLeft = $("#nav").offset().left;
var navTotal = navWidth + navLeft;
var subMenus = $("#nav").children("li").children("ul");
for (var i = 0; i < subMenus.length; i++) {
var subMenu = subMenus.eq(i);
subMenu.parent().children("span").css({"padding-right":30+"px"});
subMenu.parent().addClass("hasSubMenu");
subMenu.children("li").css({
"min-width": subMenu.parent().width() - 5 + "px"
});
var subMenuWidth = subMenu.width();
var subMenuLeft = subMenu.offset().left;
var subMenuTotal = subMenuWidth + subMenuLeft;
if (navTotal < subMenuTotal) {
var newOffsetLeft = navTotal - subMenuTotal;
subMenu.css({
"left": subMenuLeft + newOffsetLeft + "px"
});
}
}
$("#nav").click(function () {
if ($(this).find("span").length > 0) {
$(this).find("ul").toggle();
}
});
html, body {
padding:0px;
margin:0px;
background-color:grey;
}
#nav {
position:absolute;
list-style-type:none;
padding:0px;
margin-left:5px;
margin-top:5px;
background-color:white;
font-size:20px;
white-space:nowrap;
}
#nav * {
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
#nav>li {
display:inline-block;
position:relative;
margin:-5px;
padding:0px;
}
#nav>li.hasSubMenu:after {
content:"\25BE";
display:inline-block;
position:absolute;
right:14px;
bottom:13px;
z-index:2;
font-size:15px;
}
#nav li>* {
display:block;
color:black;
text-decoration:none;
padding:10px;
background-color:white;
text-align:center;
cursor:pointer;
}
#nav>li>* {
padding-right:15px;
}
#nav li>a:hover, #nav li>span:hover{
color:white;
background-color:#bbb;
}
#nav ul {
display:none;
position:absolute;
list-style-type:none;
padding:0px;
margin-left:0px;
background-color:white;
font-size:18px;
white-space:nowrap;
}
.active {
background-color:#789abc !important;
color:bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav" class="list-group showdiv">
<li id="nav_bespokeSoftwareDevelopment">Bespoke Software Development
</li>
<li id="nav_userExperienceDesign">User Experience Design
</li>
<li id="nav_staffAugmentation"><span>Staff Augmentation</span>
<ul>
<li id="nav_item1">Item 1
</li>
<li id="nav_item2">Item 2
</li>
<li id="nav_item3">Item 3
</li>
</ul>
</li>
<li id="nav_testingAndValidation">Testing and Validation
</li>
<li id="nav_gaming">Gaming
</li>
</ul>

How to sort a list with two items

Hello I want to make this two items sortable without using plugins and stuff, only HTML5 and pure javascript:
<ul ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
<li draggable="true" ondragstart="return dragStart(event)">Item 1</li>
<li draggable="true" ondragstart="return dragStart(event)">Item 2</li>
</ul>
well i've tried:
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('class'));
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}

Would you like to order alphabetically? Here is a solution without any library.
var items = document.getElementsByTagName("li");
var values = [];
for(var i = 0; i < items.length; i++) {
values.push(items[i].innerHTML);
}
values.sort();
for(var i = 0; i < items.length; i++) {
items[i].innerHTML = values[i];
}
http://jsfiddle.net/GG9gG/

jsfiddle:
http://jsfiddle.net/pMcmL/6/
HTML:
<ul id="sortable">
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 1
</li>
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 2
</li>
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 3
</li>
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 4
</li>
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 5
</li>
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 6
</li>
<li class="ui-state-default">
<span>⇅</span><input type="text"/>Item 7
</li>
</ul>
CSS:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css
+
li {
margin: 1px;
width: 130px;
padding:2px;
vertical-align:middle;
}
li span {
color: gray;
font-size: 1.1em;
margin-right: 5px;
margin-left: 5px;
cursor: pointer;
height:100%;
}
input[type="text"] {
width: 32px;
margin-right: 5px;
border: 1px solid lightgay;
color: blue;
text-align: center;
}
Javascript:
sort_ul = $('#sortable'); // * sortable <ul>
itemsCount = $('#sortable li').length; // * total number of items
function updateIndexes() { // * function to update
$('#sortable li input').each( // items numbering
function(i) {
$(this).val(i + 1);
});
}
updateIndexes(); // * start by update items numbering
sort_ul.sortable({handle: 'span', // * apply 'sortable' to <ul>
stop: function(event, ui){
updateIndexes(); // * when sorting is completed,
} // update items numbering
});
$('#sortable li input').keyup( // * watch for keyup on inputs
function(event) {
if (event.keyCode == '13') { // * react only to ENTER press
event.preventDefault(); // * stop the event here
position = parseInt($(this).val());// * get user 'new position'
li = $(this).parent(); // * store current <li> to move
if (position >= 1 // * proceed only if
&& position <= itemsCount){ // 1<=position<=number of items
li.effect('drop', function(){ // * hide <li> with 'drop' effect
li.detach(); // * detach <li> from DOM
if (position == itemsCount)
sort_ul.append(li); // * if pos=last: append
else // else: insert before position-1
li.insertBefore($('#sortable li:eq('+(position - 1)+')'));
updateIndexes(); // * update items numbering
li.effect('slide'); // * apply 'slide' effect when in
}); // new position
}else{ li.effect('highlight'); } // * if invalid position: highlight
}}});
Reference Link