Closed Thread Icon

Preserved Topic: Grr, setting value in forms and dropping objects... Pages that link to <a href="https://ozoneasylum.com/backlink?for=18490" title="Pages that link to Preserved Topic: Grr, setting value in forms and dropping objects..." rel="nofollow" >Preserved Topic: Grr, setting value in forms and dropping objects...\

 
Author Thread
DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted posted 10-23-2001 20:27

Back in state normal, banging the 'ol head against the unpadded patches in the cell...

I've got two problems, one that I can work around, but don't want to, and one where I simply don't know how to do it...

1. Forms, inputfield type file:
What I want:
To give it a value through javascript using "document.formname.fieldname.value = dataHoldingVariable;"... Don't work.
What works:
Reading the field using dataHoldingVariable = document.formname.fieldname.value;
What gives???
I'm getting a feeling that this fieldtype does more than simply copying an url to the field...
Can this be done?

2. Detecting where a draggable layer/image/object is dropped on a page.
What I have:
Code to grab an object, drag it, drop it anywhere, sense when it is dropped BUT not where other than on a coordinate-level.
What I need:
To know how to define several different small drop-areas that user is allowed to drop the object in, plus be able to pick up in what area the object has "landed". If object is dropped in the close vincinity of an area I'd like to "snap" it in place.

I've thought about using the srcElement and IE's ability to "bubble" an event (yes, it's an IE specific app, I'm even allowed to direct a specific version...), this way I could navigate one or more steps up in the hierarchy and collect ID's for the drop-zone, but I'm really unsure on how to handle div's defined as drop-areas with this method. Even if I get this to work properly, I'm stumped on how to detect the drop itself, maybe onMouseUp in combination with... what I don't know.

I'm down to more or less good guesses here, and don't really have the time to go the trial and error way right now. If anyone could point me in the direction of a tutorial that is fairly basic code-wise, or explain the basics that I need to work on to get there.

What I'm basically working towards is a simulated desktop where you should be able to drag a representation of a file, drop it in one of several places, auto set a classification based on the place it was dropped, display this in a form that after a manual check should submit the file into a storage system. Right now I'm in a "prove the concept/demo" phase and I've got everything down except for the detection of the drop-zone.

Grateful for all tips :-)
//Dan


-{ a vibration is a movement that doesn't know which way to go }-

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted posted 10-23-2001 22:11

1. Assigning values to form fields like that should work fine. Maybe the problem is located somewhere else. It would be best if you could post your complete script...

2. Since you already know object coordinates when it is dropped, you can use that info to check if object is inside some defined area. Let?s say that X & Y are object coordinates (top left) and that we have one drop area (rectangle) with top left point located at X1 & Y1 coordinates and areaWidth & areaHeight as area dimensions. Now, simply check if X & Y object coordinates are in area range, like this:

if (((X >= X1) && (X <= X1+areaWidth)) && ((Y >= Y1) && (Y <= Y1+areaHeight))) { object is in! }

The same thing goes for snapping. Just extend area limits a little bit...


DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted posted 10-23-2001 23:26

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).]

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted posted 10-24-2001 00:16

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 10-24-2001 00:54

Max was talking about most form fields. The file field is an exception to the rule.



:[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted posted 10-24-2001 09:03

Thanx mrMax, InI and bitdamaged, that's about what I figured, good to have it confirmed!
This way I can at least explain to the client why it doesn't work that way.

I'll get to work on the drop-areas now.
Thanx again!
/Dan


-{ a vibration is a movement that doesn't know which way to go }-

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted posted 10-24-2001 17:21

Woopee!
It all works!!! got a proof of concept down for the client, thanx 4 all help!
/Dan


-{ a vibration is a movement that doesn't know which way to go }-

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted posted 10-25-2001 19:33

For the record, I haven't noticed that Dan was talking about file input and that's why I said it *should work* with most for fields...


« BackwardsOnwards »

Show Forum Drop Down Menu