HTML DRAG AND DROP Элементы не будут перетаскиваться в исходную область
Я создал небольшую программу, которая позволяет пользователю перетаскивать различные элементы в разные места и сохранять их в качестве домашней страницы. Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно отправить сгенерированные значения конкретным пользователям в PHPMyAdmin, чтобы при повторном открытии их домашней страницы все было так же. Я думаю, что это довольно простое решение, но я новичок в программировании и мне нужна помощь. Ниже приведен код. Не стесняйтесь копировать и вставлять, чтобы найти решения. Спасибо за любую помощь.
Формат для значений при нажатии Сохранить:
ID ул | Удостоверение личности ли;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Drag and Drop to the columns</title><script type="text/javascript">
if(location.hostname.toLowerCase().indexOf('dhtmlgoodies') >=0) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2042963-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
}
</script>
<style type="text/css">
#footer{
height:30px;
vertical-align:middle;
text-align:right;
clear:both;
padding-right:3px;
margin-top:2px;
width:790px;
}
#footer form{
margin:0px;
margin-top:2px;
}
#drop_zone{ /* Main container for this script */
width:790px;
height:1100px;
margin: auto;
border:1px solid white;
-moz-user-select:none;
}
#drop_zone ul{ /* General rules for all <ul> */
margin-top:0px;
margin-left:0px;
margin-bottom:5px;
padding:2px;
}
#drop_zone li,#dragContent li{ /* Movable items, i.e. <LI> */
list-style-type:none;
display: inline-block;
width: 172px;
height:62px;
margin: auto;
border:1px solid #000;
padding:10px;
cursor:pointer;
font-size:20px;
text-align: center;
box-shadow: 2px 2px 2px #999;
}
li#indicateDestination{ /* Box indicating where content will be dropped -
i.e. the one you use if you don't use arrow */
border:1px solid #317082;}/* Right COLUMN CSS */
div#boxobjects{ /* Right column "Available students" */
float:left;
margin:auto;
padding-top:50px;
padding-bottom:0px;
/* CSS HACK */
width: 790px; /* IE 5.x */
width/* */:/**/770px; /* Other browsers */
width: /**/770px;
}
#boxobjects ul{ /* Right(Sources) column <ul> */
height:auto;
width:auto;
}
p{
margin-bottom:10px;
}
div#boxobjects div{
border:1px solid #999;
}
div#boxobjects div ul{ /* right column <ul> */
margin:auto;
}
#boxobjects div p{ /* Heading above right column */
font-weight:bold;
color:black;
margin-bottom:10px;
}
/* END LEFT COLUMN CSS */
#drop_zone .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 */
padding-top: 100px;
padding-left:90px;
width:650px;
}
#dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */
float:left;
margin-right:10px;
margin-bottom:10px;
margin-top:10px;
border:1px solid #999;
/* CSS HACK */
width: auto; /* IE 5.x */
width/* */:/**/auto; /* Other browsers */
width: /**/auto;
height: auto; /* IE 5.x */
height/* */:/**/auto; /* Other browsers */
height: /**/auto;
}#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:auto;
height:auto;
border:0px;
margin-bottom:0px;
overflow:visible;
}
#dragContent{ /* Drag container */
position:relative;
width:150px;
height:100px;
display:none;
margin:0px;
padding:0px;
z-index:auto;
}</style>
<style type="text/css" media="print">
div#boxobjects{
display:none;
}
img{
display:none;
}
#drop_zone{
border:0px;
width:100%;
}
</style>
<script type="text/javascript">/* VARIABLES YOU COULD MODIFY */
var boxSizeArray = [1,1,1,1,1,1,1,1,1]; // Array indicating how many items
// there is rooom for in the right column ULs
var verticalSpaceBetweenListItems = 3; // Pixels space between one <li> and
//next
// Same value or higher as margin
//bottom in CSS for #drop_zone ul li,#dragContent livar 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 arrow_offsetX = -5; // Offset X - position of small arrow
var arrow_offsetY = 0; // Offset Y - position of small arrow
if(!MSIE || navigatorVersion > 6){
arrow_offsetX = -6; // Firefox - offset X small arrow
arrow_offsetY = -13; // Firefox - offset Y small arrow
}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;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('drop_zone');
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('boxobjects');
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 cursor_hand(x)
{
x.style.cursor = "pointer";
}
function cursor_default(x)
{
x.style.cursor = "default";
}
function hide_element(nm)
{
var table_selector = "#" + nm;
$(nm).toggle();
}
</script>
</head>
</script>
<link rel="stylesheet" href="includes/asV3.css" /><?php
// Print a customized message:
echo "<p>Welcome to NorseGIS, {$_SESSION['first_name']}
{$_SESSION['last_name']}!</p>";
$user_num = $_SESSION['user_number'];
?></script>
<body>
<h1><p style="text-align:center;"><?php echo "{$_SESSION['first_name']}
{$_SESSION['last_name']}"?>'s Homepage</p></h1>
<br><div id="drop_zone"> <!-- entire drag drop section -->
<div id="dhtmlgoodies_mainContainer" > <!-- all of the boxes to drop in -
->
<!-- ONE <UL> for each "room" -->
<div style = "width:200px; height:90px;">
<ul id="box1" style = "width:200px; height:90px;">
</ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box2" style = "width:200px; height:90px;"></ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box3" style = "width:200px; height:90px;"></ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box4" style = "width:200px; height:90px;"></ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box5" style = "width:200px; height:90px;">
</ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box6" style = "width:200px; height:90px;">
</ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box7" style = "width:200px; height:90px;">
</ul>
</div>
<div style = "width:200px; height:90px;">
<ul id="box8" style = "width:200px; height:90px;">
</ul>
</div >
<div style = "width:200px; height:90px;">
<ul id="box9" style = "width:200px; height:90px;">
</ul>
</div>
</div>
<br>
<form action="aPage.html" method="post" ><input type="button"onclick="saveDragDropNodes()" value="Save Changes"></form>
<br>
<form method="post"><input type="button" onclick="hide_element(table)"value="Edit"></form>
<div id="boxobjects"> <!-- entire left column -->
<div>
<p onclick = "hide_element(table);" style = "margin:auto; text-
decoration: underline; font-size:20px;" onmouseover="cursor_hand(this)"onmouseout="cursor_default(this)"><?php echo "{$_SESSION['first_name']}"?>'s
Options</p>
<br>
<div id = "table" style = "display:none;">
<ul id="allItems">
<li id="node1"><a href = "snow_events.php" style = "text-decoration:
underline; text-align:center;">Snow Removal</a></li>
<li id="node2"><a href = "weatherradar.php" style = "text-decoration:
underline; text-align:center;">Weather Radar</a></li>
<li id="node3"><a href = "warranty.php" style = "text-decoration:
underline; text-align:center;">The Warranty</a></li>
<li id="node4">Student D</li>
<li id="node5">Student E</li>
<li id="node6">Student F</li>
<li id="node7">Student G</li>
<li id="node8">Student H</li>
<li id="node9">Student I</li>
<li id="node10">Student J</li>
<li id="node11">Student K</li>
<li id="node12">Student L</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer"> <!-- box with save button -->
</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator"></div>
<div id="saveContent"></div>
</body>
//</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …
detector