0
私のプログラムでは、プレイヤーをドラッグして別のチームにドロップすることができます。あなたが「チームA」の欄に「選手A」をドラッグした場合。一番下にある「保存」ボタンをクリックしたときに、どのチームにプレイヤーを割り当てたかを保存するために、localStorageやその他の関数を操作するにはどうすればよいですか？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>
あなたの全プロジェクトを貼り付けないでください。 – Igbaryya