Thank you very much mrMax, I'll get to work on the "snapping" tomorrow 
Now, the formfield thing...
I can assign value this way to all inputfields fine, except when it's type="file" !
Here is the current test-code, it's commented around the parts that refuse to work.
(please ignore design, none is done)
I've got a workaround for it, which is to let the user browse for the file himself, first, then drag it to correct classification (change as commented in code), but I would like to have the option to dynamically add file-icons through the filesystemobject on the clientside if need arises (multi saving files under the same classification).
Whatever you then drag-drop-classify will then be placed in corresponding "browse-fields" for storage on the server.
code:
<html>
<head>
<title>Dra-släpp-fil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
background-color: #339999;
font-family: Verdana, Arial, sans-serif;
color:#FFFFFF;
font-size:12pt;
}
td {
background-color: #339999;
font-family: Verdana, Arial, sans-serif;
color:#FFFFFF;
font-size:12pt;
}
.list_tree{
font-family: Verdana, Arial, sans-serif;
color:#FFFFFF;
font-size:12pt;
line-height : 30pt;
}
.img{
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size:8pt;
}
</style>
<SCRIPT LANGUAGE="Javascript1.2">
<!--//
function reLoad(){
if(document.layers){
location.reload();
}
}
function getObj(name) {
if (document.getElementById)
return document.getElementById(name).style;
else if (document.all)
return document.all[name].style;
else if (document.layers)
return document.layers[name];
}
function grabLayer(layerName){
var button, Xpos, Ypos;
var x = getObj(layerName);
button = window.event.button;
Xpos = window.event.x;
Ypos = window.event.y;
if(button == 1){
x.data = document.frmSave.fileSave.value;
moveLayer(layerName,Xpos,Ypos);
}
}
function moveLayer(layerName,Xpos,Ypos){
var x = getObj(layerName);
x.left = (Xpos - 22);
x.top = (Ypos - 10);
window.event.returnValue = false;
}
function getData(layerName){
var dataContainer;
var x = getObj(layerName);
//this is a "home-construction, I have set a "style-attribute" that holds the path,
//then I access it this way, works for me ;-)"
dataContainer = x.data;
//this is just a check on what the container holds at the moment.
alert(dataContainer);
document.frmSave.txtClass1.value = dataContainer;
// here lies the problem, I can retrieve the value, but not set it,
//the part above works, but not this...
document.frmSave.fileSave.value = dataContainer;
}
function showData(){
alert(document.frmSave.fileSave.value);
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" onResize="reLoad();">
<img src="images/comp.gif" id="image1" width="44" height="41" alt="" border="0" onMouseMove="javascript:grabLayer('image1');" onMouseUp="javascript:getData('image1');" style="position:absolute; left:20px; top:200px; width:44px; height:41px; z-index:21; data:no valid path;">
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="37" valign="top" colspan="3"><h3>Test of drag 'n drop</h3></td>
</tr>
<tr>
<td width="19%" height="100%" valign="top">
<h5>Sök fram bilden du vill registrera.</h5>
<form name="frmSave" action="javascript:showData();" enctype="multipart/form-data">
<!--
If I uncomment this input, and comment out the "browse-field" at the end of the form,
the script works, but that rules out listing several files via the filesystem object,
which would be nice to have as an option...
<input type="file" name="fileSave" size="20" accept="image/jpeg,image/gif,image/x-png">
-->
</td>
<td width="30%" valign="top">
<dl class="list_tree">
<dt class="list_tree">item 1</dt>
<dd>item 2a</dd>
<dt>item 3</dt>
<dd>item 3a</dd>
<dt>item4</dt>
<dd>item4a</dd>
<dd>item4b</dd>
<dd>item4c</dd>
<dt>item5</dt>
<dd>item 5a</dd>
<dd>item 5b</dd>
<dd>item 5c</dd>
</dl>
</td>
<td width="51%" valign="top">
<h5>Registreringsformulär</h5>
<form name="frmSave" action="javascript:showData();" enctype="multipart/form-data">
<input name="txtClass1" type="text" size="30"><br>
<input name="txtClass2" type="text" size="30"><br>
<input name="txtClass3" type="text" size="30"><br>
<input name="txtClass4" type="text" size="30"><br>
<!-- If the one above is used, this should be commented out -->
<input type="file" name="fileSave" size="20">
<input type="submit" value="Spara">
</form>
</td>
</tr>
</table>
</body>
</html>
-{ a vibration is a movement that doesn't know which way to go }-
[This message has been edited by DmS (edited 10-23-2001).]
[This message has been edited by DmS (edited 10-23-2001).]
posted 10-23-2001 20:27
