1. 首頁
  2. 問答
  3. 修復我的「保存」按鈕

修復我的「保存」按鈕

2017-03-17 49 views
0

我有一些代碼，您可以選擇玩家並使用拖放技術爲他們分配球隊。現在，是否有可能通過點擊「保存」按鈕來保存每個玩家所在的團隊。我知道localStorage可以工作，但我不確定如何將其實施到我的代碼中。修復我的「保存」按鈕

注意：爲了使代碼正常工作，您必須複製代碼並將其作爲HTML文件保存在您的計算機上。然後代碼將工作得很好。

/* VARIABLES YOU COULD MODIFY */ 
 
var boxSizeArray = [13,13,13,13,13,13]; \t // Array indicating how many items there is rooom for in the right column ULs 
 

 
var arrow_offsetX = -5; \t // Offset X - position of small arrow 
 
var arrow_offsetY = 0; \t // Offset Y - position of small arrow 
 

 
var arrow_offsetX_firefox = -6; \t // Firefox - offset X small arrow 
 
var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow 
 

 
var verticalSpaceBetweenListItems = 3; \t // Pixels space between one <li> and next 
 
\t \t \t \t \t \t \t \t \t \t // Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li 
 

 

 
var indicateDestionationByUseOfArrow = false; \t // Display arrow to indicate where object will be dropped(false = use rectangle) 
 

 
var cloneSourceItems = false; \t // Items picked from main container will be cloned(i.e. "copy" instead of "cut"). 
 
var cloneAllowDuplicates = true; \t // 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; \t // Reference to dragged <li> 
 
var contentToBeDragged_src = false; \t // Reference to parent of <li> before drag started 
 
var contentToBeDragged_next = false; \t // Reference to next sibling of <li> to be dragged 
 
var destinationObj = false; \t // Reference to <UL> or <LI> where element is dropped. 
 
var dragDropIndicator = false; \t // Reference to small arrow indicating where items will be dropped 
 
var ulPositionArray = new Array(); 
 
var mouseoverObj = false; \t // 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){ 
 
    \t if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop; 
 
    } 
 
    return returnValue; 
 
} 
 

 
function getLeftPos(inputObj) 
 
{ 
 
    var returnValue = inputObj.offsetLeft; 
 
    while((inputObj = inputObj.offsetParent) != null){ 
 
    \t if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft; 
 
    } 
 
    return returnValue; 
 
} 
 

 
function cancelEvent() 
 
{ 
 
\t return false; 
 
} 
 
function initDrag(e) \t // Mouse button is pressed down on a LI 
 
{ 
 
\t if(document.all)e = event; 
 
\t var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); 
 
\t var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); 
 

 
\t dragTimer = 0; 
 
\t dragContentObj.style.left = e.clientX + sl + 'px'; 
 
\t dragContentObj.style.top = e.clientY + st + 'px'; 
 
\t contentToBeDragged = this; 
 
\t contentToBeDragged_src = this.parentNode; 
 
\t contentToBeDragged_next = false; 
 
\t if(this.nextSibling){ 
 
\t \t contentToBeDragged_next = this.nextSibling; 
 
\t \t if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling; 
 
\t } 
 
\t timerDrag(); 
 
\t return false; 
 
} 
 

 
function timerDrag() 
 
{ 
 
\t if(dragTimer>=0 && dragTimer<10){ 
 
\t \t dragTimer++; 
 
\t \t setTimeout('timerDrag()',10); 
 
\t \t return; 
 
\t } 
 
\t if(dragTimer==10){ 
 

 
\t \t if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){ 
 
\t \t \t newItem = contentToBeDragged.cloneNode(true); 
 
\t \t \t newItem.onmousedown = contentToBeDragged.onmousedown; 
 
\t \t \t contentToBeDragged = newItem; 
 
\t \t } 
 
\t \t dragContentObj.style.display='block'; 
 
\t \t dragContentObj.appendChild(contentToBeDragged); 
 
\t } 
 
} 
 

 
function moveDragContent(e) 
 
{ 
 
\t if(dragTimer<10){ 
 
\t \t if(contentToBeDragged){ 
 
\t \t \t if(contentToBeDragged_next){ 
 
\t \t \t \t contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next); 
 
\t \t \t }else{ 
 
\t \t \t \t contentToBeDragged_src.appendChild(contentToBeDragged); 
 
\t \t \t } 
 
\t \t } 
 
\t \t return; 
 
\t } 
 
\t if(document.all)e = event; 
 
\t var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); 
 
\t var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); 
 

 

 
\t dragContentObj.style.left = e.clientX + sl + 'px'; 
 
\t dragContentObj.style.top = e.clientY + st + 'px'; 
 

 
\t if(mouseoverObj)mouseoverObj.className=''; 
 
\t destinationObj = false; 
 
\t dragDropIndicator.style.display='none'; 
 
\t if(indicateDestinationBox)indicateDestinationBox.style.display='none'; 
 
\t var x = e.clientX + sl; 
 
\t var y = e.clientY + st; 
 
\t var width = dragContentObj.offsetWidth; 
 
\t var height = dragContentObj.offsetHeight; 
 

 
\t var tmpOffsetX = arrow_offsetX; 
 
\t var tmpOffsetY = arrow_offsetY; 
 
\t if(!document.all){ 
 
\t \t tmpOffsetX = arrow_offsetX_firefox; 
 
\t \t tmpOffsetY = arrow_offsetY_firefox; 
 
\t } 
 

 
\t for(var no=0;no<ulPositionArray.length;no++){ 
 
\t \t var ul_leftPos = ulPositionArray[no]['left']; 
 
\t \t var ul_topPos = ulPositionArray[no]['top']; 
 
\t \t var ul_height = ulPositionArray[no]['height']; 
 
\t \t var ul_width = ulPositionArray[no]['width']; 
 

 
\t \t if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){ 
 
\t \t \t var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length; 
 
\t \t \t if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--; 
 
\t \t \t if(noExisting<boxSizeArray[no-1] || no==0){ 
 
\t \t \t \t dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px'; 
 
\t \t \t \t var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI'); 
 

 
\t \t \t \t var clonedItemAllreadyAdded = false; 
 
\t \t \t \t if(cloneSourceItems && !cloneAllowDuplicates){ 
 
\t \t \t \t \t for(var liIndex=0;liIndex<subLi.length;liIndex++){ 
 
\t \t \t \t \t \t if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(clonedItemAllreadyAdded)continue; 
 
\t \t \t \t } 
 

 
\t \t \t \t for(var liIndex=0;liIndex<subLi.length;liIndex++){ 
 
\t \t \t \t \t var tmpTop = getTopPos(subLi[liIndex]); 
 
\t \t \t \t \t if(!indicateDestionationByUseOfArrow){ 
 
\t \t \t \t \t \t if(y<tmpTop){ 
 
\t \t \t \t \t \t \t destinationObj = subLi[liIndex]; 
 
\t \t \t \t \t \t \t indicateDestinationBox.style.display='block'; 
 
\t \t \t \t \t \t \t subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]); 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }else{ 
 
\t \t \t \t \t \t if(y<tmpTop){ 
 
\t \t \t \t \t \t \t destinationObj = subLi[liIndex]; 
 
\t \t \t \t \t \t \t dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px'; 
 
\t \t \t \t \t \t \t dragDropIndicator.style.display='block'; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t \t if(!indicateDestionationByUseOfArrow){ 
 
\t \t \t \t \t if(indicateDestinationBox.style.display=='none'){ 
 
\t \t \t \t \t \t indicateDestinationBox.style.display='block'; 
 
\t \t \t \t \t \t ulPositionArray[no]['obj'].appendChild(indicateDestinationBox); 
 
\t \t \t \t \t } 
 

 
\t \t \t \t }else{ 
 
\t \t \t \t \t if(subLi.length>0 && dragDropIndicator.style.display=='none'){ 
 
\t \t \t \t \t \t dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px'; 
 
\t \t \t \t \t \t dragDropIndicator.style.display='block'; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(subLi.length==0){ 
 
\t \t \t \t \t \t dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px' 
 
\t \t \t \t \t \t dragDropIndicator.style.display='block'; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t \t if(!destinationObj)destinationObj = ulPositionArray[no]['obj']; 
 
\t \t \t \t mouseoverObj = ulPositionArray[no]['obj'].parentNode; 
 
\t \t \t \t mouseoverObj.className='mouseover'; 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
/* End dragging 
 
Put <LI> into a destination or back to where it came from. 
 
*/ 
 
function dragDropEnd(e) 
 
{ 
 
\t if(dragTimer==-1)return; 
 
\t if(dragTimer<10){ 
 
\t \t dragTimer = -1; 
 
\t \t return; 
 
\t } 
 
\t dragTimer = -1; 
 
\t if(document.all)e = event; 
 

 

 
\t if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){ 
 
\t \t contentToBeDragged.parentNode.removeChild(contentToBeDragged); 
 
\t }else{ 
 

 
\t \t if(destinationObj){ 
 
\t \t \t if(destinationObj.tagName=='UL'){ 
 
\t \t \t \t destinationObj.appendChild(contentToBeDragged); 
 
\t \t \t }else{ 
 
\t \t \t \t destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj); 
 
\t \t \t } 
 
\t \t \t mouseoverObj.className=''; 
 
\t \t \t destinationObj = false; 
 
\t \t \t dragDropIndicator.style.display='none'; 
 
\t \t \t if(indicateDestinationBox){ 
 
\t \t \t \t indicateDestinationBox.style.display='none'; 
 
\t \t \t \t document.body.appendChild(indicateDestinationBox); 
 
\t \t \t } 
 
\t \t \t contentToBeDragged = false; 
 
\t \t \t return; 
 
\t \t } 
 
\t \t if(contentToBeDragged_next){ 
 
\t \t \t contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next); 
 
\t \t }else{ 
 
\t \t \t contentToBeDragged_src.appendChild(contentToBeDragged); 
 
\t \t } 
 
\t } 
 
\t contentToBeDragged = false; 
 
\t dragDropIndicator.style.display='none'; 
 
\t if(indicateDestinationBox){ 
 
\t \t indicateDestinationBox.style.display='none'; 
 
\t \t document.body.appendChild(indicateDestinationBox); 
 

 
\t } 
 
\t mouseoverObj = false; 
 

 
} 
 

 
/* 
 
Preparing data to be saved 
 
*/ 
 
function saveDragDropNodes() 
 
{ 
 
\t var saveString = ""; 
 
\t var uls = dragDropTopContainer.getElementsByTagName('UL'); 
 
\t for(var no=0;no<uls.length;no++){ \t // LOoping through all <ul> 
 
\t \t var lis = uls[no].getElementsByTagName('LI'); 
 
\t \t for(var no2=0;no2<lis.length;no2++){ 
 
\t \t \t if(saveString.length>0)saveString = saveString + ";"; 
 
\t \t \t saveString = saveString + uls[no].id + '|' + lis[no2].id; 
 
\t \t } 
 
\t } 
 

 
\t 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() 
 
{ 
 
\t dragContentObj = document.getElementById('dragContent'); 
 
\t dragDropIndicator = document.getElementById('dragDropIndicator'); 
 
\t dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer'); 
 
\t document.documentElement.onselectstart = cancelEvent;; 
 
\t var listItems = dragDropTopContainer.getElementsByTagName('LI'); \t // Get array containing all <LI> 
 
\t var itemHeight = false; 
 
\t for(var no=0;no<listItems.length;no++){ 
 
\t \t listItems[no].onmousedown = initDrag; 
 
\t \t listItems[no].onselectstart = cancelEvent; 
 
\t \t if(!itemHeight)itemHeight = listItems[no].offsetHeight; 
 
\t \t if(MSIE && navigatorVersion/1<6){ 
 
\t \t \t listItems[no].style.cursor='hand'; 
 
\t \t } 
 
\t } 
 

 
\t var mainContainer = document.getElementById('dhtmlgoodies_mainContainer'); 
 
\t var uls = mainContainer.getElementsByTagName('UL'); 
 
\t itemHeight = itemHeight + verticalSpaceBetweenListItems; 
 
\t for(var no=0;no<uls.length;no++){ 
 
\t \t uls[no].style.height = itemHeight * boxSizeArray[no] + 'px'; 
 
\t } 
 

 
\t var leftContainer = document.getElementById('dhtmlgoodies_listOfItems'); 
 
\t var itemBox = leftContainer.getElementsByTagName('UL')[0]; 
 

 
\t document.documentElement.onmousemove = moveDragContent; \t // Mouse move event - moving draggable div 
 
\t document.documentElement.onmouseup = dragDropEnd; \t // Mouse move event - moving draggable div 
 

 
\t var ulArray = dragDropTopContainer.getElementsByTagName('UL'); 
 
\t for(var no=0;no<ulArray.length;no++){ 
 
\t \t ulPositionArray[no] = new Array(); 
 
\t \t ulPositionArray[no]['left'] = getLeftPos(ulArray[no]); 
 
\t \t ulPositionArray[no]['top'] = getTopPos(ulArray[no]); 
 
\t \t ulPositionArray[no]['width'] = ulArray[no].offsetWidth; 
 
\t \t ulPositionArray[no]['height'] = ulArray[no].clientHeight; 
 
\t \t ulPositionArray[no]['obj'] = ulArray[no]; 
 
\t } 
 

 
\t if(!indicateDestionationByUseOfArrow){ 
 
\t \t indicateDestinationBox = document.createElement('LI'); 
 
\t \t indicateDestinationBox.id = 'indicateDestination'; 
 
\t \t indicateDestinationBox.style.display='none'; 
 
\t \t document.body.appendChild(indicateDestinationBox); 
 

 

 
\t } 
 
} 
 

 
window.onload = initDragDropScript;
body{ 
 
\t font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; \t /* Font to use */ 
 
\t background-color:#E2EBED; 
 
} 
 
#footer{ 
 
\t height:30px; 
 
\t vertical-align:middle; 
 
\t text-align:right; 
 
\t clear:both; 
 
\t padding-right:3px; 
 
\t background-color:#317082; 
 
\t margin-top:2px; 
 
\t width:1250px; 
 
} 
 
#footer form{ 
 
\t margin:0px; 
 
\t margin-top:2px; 
 
} 
 
#dhtmlgoodies_dragDropContainer{ \t /* Main container for this script */ 
 
\t width:100%; 
 
\t height:2250px; 
 
\t border:1px solid #317082; 
 
\t background-color:#FFF; 
 
\t -moz-user-select:none; 
 
} 
 
#dhtmlgoodies_dragDropContainer ul{ \t /* General rules for all <ul> */ 
 
\t margin-top:0px; 
 
\t margin-left:0px; 
 
\t margin-bottom:0px; 
 
\t padding:2px; 
 
} 
 

 
#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ \t /* Movable items, i.e. <LI> */ 
 
\t list-style-type:none; 
 
\t height:20px; 
 
\t background-color:#EEE; 
 
\t border:1px solid #000; 
 
\t padding:2px; 
 
\t margin-bottom:2px; 
 
\t cursor:pointer; 
 
\t font-size:0.9em; 
 
} 
 

 
li#indicateDestination{ \t /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */ 
 
\t border:1px dotted #600; 
 
\t background-color:#FFF; 
 
} 
 

 

 
/* LEFT COLUMN CSS */ 
 
div#dhtmlgoodies_listOfItems{ \t /* Left column "Available students" */ 
 

 
\t float:left; 
 
\t padding-left:10px; 
 
\t padding-right:10px; 
 

 
\t /* CSS HACK */ 
 
\t width: 180px; \t /* IE 5.x */ 
 
\t width/* */:/**/160px; \t /* Other browsers */ 
 
\t width: /**/160px; 
 

 
} 
 
#dhtmlgoodies_listOfItems ul{ \t /* Left(Sources) column <ul> */ 
 
\t height:2184px; 
 

 
} 
 

 
div#dhtmlgoodies_listOfItems div{ 
 
\t border:1px solid #999; 
 
} 
 
div#dhtmlgoodies_listOfItems div ul{ \t /* Left column <ul> */ 
 
\t margin-left:10px; \t /* Space at the left of list - the arrow will be positioned there */ 
 
} 
 
#dhtmlgoodies_listOfItems div p{ \t /* Heading above left column */ 
 
\t margin:0px; 
 
\t font-weight:bold; 
 
\t padding-left:12px; 
 
\t background-color:#317082; 
 
\t color:#FFF; 
 
\t margin-bottom:5px; 
 
} 
 
/* END LEFT COLUMN CSS */ 
 

 
#dhtmlgoodies_dragDropContainer .mouseover{ \t /* Mouse over effect DIV box in right column */ 
 
\t background-color:#E2EBED; 
 
\t border:1px solid #317082; 
 
} 
 

 
/* Start main container CSS */ 
 

 
div#dhtmlgoodies_mainContainer{ \t /* Right column DIV */ 
 
\t width:1096px; 
 
\t float:left; 
 
} 
 
#dhtmlgoodies_mainContainer div{ \t /* Parent <div> of small boxes */ 
 
\t float:left; 
 
\t margin-right:10px; 
 
\t margin-bottom:10px; 
 
\t margin-top:0px; 
 
\t border:1px solid #999; 
 

 
\t /* CSS HACK */ 
 
\t width: 172px; \t /* IE 5.x */ 
 
\t width/* */:/**/170px; \t /* Other browsers */ 
 
\t width: /**/170px; 
 

 
} 
 
#dhtmlgoodies_mainContainer div ul{ 
 
\t margin-left:10px; 
 
} 
 

 
#dhtmlgoodies_mainContainer div p{ \t /* Heading above small boxes */ 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t padding-left:12px; 
 
\t font-weight:bold; 
 
\t background-color:#317082; 
 
\t color:#FFF; 
 
\t margin-bottom:5px; 
 
} 
 

 
#dhtmlgoodies_mainContainer ul{ \t /* Small box in right column ,i.e <ul> */ 
 
\t width:152px; 
 
\t height:80px; 
 
\t border:0px; 
 
\t margin-bottom:0px; 
 
\t overflow:hidden; 
 

 
} 
 

 
#dragContent{ \t /* Drag container */ 
 
\t position:absolute; 
 
\t width:150px; 
 
\t height:20px; 
 
\t display:none; 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t z-index:2000; 
 
} 
 

 
#dragDropIndicator{ \t /* DIV for the small arrow */ 
 
\t position:absolute; 
 
\t width:7px; 
 
\t height:10px; 
 
\t display:none; 
 
\t z-index:1000; 
 
\t margin:0px; 
 
\t padding:0px; 
 
} 
 
</style> 
 
<style type="text/css" media="print"> 
 
div#dhtmlgoodies_listOfItems{ 
 
\t display:none; 
 
} 
 
body{ 
 
\t background-color:#FFF; 
 
} 
 
img{ 
 
\t display:none; 
 
} 
 
#dhtmlgoodies_dragDropContainer{ 
 
\t border:0px; 
 
\t width:100%; 
 
} 
 
p{ 
 
\t 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>

來源

2017-03-17 ChippeRockTheMurph

+0

什麼是你的代碼具有特定的問題？ – Barmar

+1

LocalStorage使用微不足道，我建議你[檢查出來]（https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage）。如果你理解了你發佈的代碼的一半，那麼使用它就不會有任何問題。如果沒有，那麼我們不是在這裏做你的工作在100行JS腳本 – Aaron

+0

你爲什麼要保存它？有很多方法可以做到這一點。 – Slime

回答

0

基本上你只需要設置變量，

localStorage.testString = 'Hello';

而且隨着

var result = localStorage.testString;

來源

2017-03-17 23:56:08 CrazyCanaries

+1

w3是不是一個好的來源，https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API – Slime

-2

記得如果你想保存的數據，你需要使用一個服務器諸如PHP之類的語言來實現這一點;我不相信HTML可以做到這一點，因爲它使用Shadow Root或者也被稱爲Shadow Dom在瀏覽器中複製代碼，並且瀏覽器沒有權限修改本地存儲文件。

來源

2017-03-17 23:56:43

+0

說了一句，可能有一些選項，比如Javascript，我可以保證它會是一件很乏味的工作用JS來做到這一點 –

0

謝謝你的jsfiddle。這顯然是錯誤的做法，你想創建一個數組結構並像這樣保存，但這只是給你一個想法。

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(); 
}

來源

2017-03-18 15:07:45 Chris

相關問題

 相關問題