PDA

View Full Version : drag and drop from on select box to select box

umen
11-07-2002, 10:22 PM
Hello
can this be done ? i mean that the user will drag one option elm from one select box
and drop it to the second and the second will get it on drop as its new option elm?
thanks!
krycek
11-07-2002, 10:42 PM
I know the kind of control you mean, and it is not supported as default by JavaScript. Unfortunately, if you want this behaviour, you will have to code it yourself - which means either adding the correct code to existing select boxes, or creating a custom object (widget) to do this.

Personally I would create a widget, because the first option is likely to take just as much time. There are a few widgets like this I have seen recently on the net, but I couldn't find them again just now... maybe someone else could point you to one :)

::] krycek [::
umen
11-07-2002, 11:15 PM
hello and thanks for the fast reply
first of all what is "widget"?
second the operation need to be only on IE 5.5+ is it more easy ?
what about using drag and drop controls?
i need some direction or sample or something ...?
thanks !
krycek
11-07-2002, 11:41 PM
A "widget" is a custom-made control, for instance look here:

Web FX (http://www.webfx.eae.net)

There are many examples of widgets there :)

I know I saw a control like the one you want somewhere, but I don't know where...

Drag and drop has to be manually coded unless you use some IE-only events (I think - but I am not sure about them, as I have my own drag-drop API I have written).



::] krycek [::
beetle
11-07-2002, 11:45 PM
That's gonna be tough. Finding the right events to trigger stuff will be key. I'll mess with it tomorrow I think....
glenngv
11-08-2002, 04:00 AM
IMO, it's better to just implement buttons like Add and Remove instead of a drag and drop functionality. That will be more cross-browser and easier to implement.
umen
11-08-2002, 05:49 AM
yeah well with buttons its realy easy to do ..
the problem is i need to make it drag and drop ..
its not my cal here ):
beetle
11-08-2002, 06:15 PM
Who's 'making' you do something that the software isn't really designed to do?

Anyhow, I've messed with this some...and this is as far as I've gotten. 2 big errors in it.

1) The drag has to be repeated for the drop to work.
2) When it does drop, it drops the options into the same select<html>
<head>
<title>Testing</title>

<script language="javascript" type="text/javascript">
var d;
function drag() {
this.select = source();
if (this.select.nodeName != "SELECT") return;
}

function drag.prototype.drop() {
this.dest = source();
this.destID = this.dest.id;

var o = this.option.cloneNode(true);
this.dest.appendChild(o);
this.select.removeChild(this.option);
alert('done!');
}

function drag.prototype.setIndex() {
var i = this.select.selectedIndex;
this.option = this.select.options[i];
}

function drag.prototype.dump() {
var dump = '';
for (var i in this) {
if (typeof this[i] != 'function')
dump += i + ' : ' + this[i] + ' : ' + this[i].nodeName + ' : ' + typeof this[i] + '\n';
}
alert(dump);
}

function source() {
var e = window.event;
return (document.all) ? e.srcElement : e.target;
}

</script>
</head>
<body>
<form onmousedown="d = new drag();" onmouseup="d.drop(d);" onmouseout="if (typeof d != 'undefined') d.setIndex();">

<select id="one" size="5">
<option value="opt 1">Option 1</option>
<option value="opt 2">Option 2</option>
<option value="opt 3">Option 3</option>
<option value="opt 4">Option 4</option>
<option value="opt 5">Option 5</option>
</select>

<select id="two" size="5">
</select>

<br>
</form>
<input type="button" value="Dump Properties" onClick="d.dump()" />
</body>
</html>See that line in red? That is why it's dropping into the same select, but I'm not sure why the onmouseup event is being triggered by the first select, when I release the button while over the 2nd. hmmmmm
glenngv
11-11-2002, 03:07 AM
selecting an option is invoked by an onclick event which is composed of onmousedown and onmouseup events.
that's why you have to *click* first the option before you can drag it.

beetle, i fixed your code :)
i think it's better to wrap the events inside the select tag itself than to the form.


<html>
<head>
<title>Testing</title>

<script language="javascript" type="text/javascript">
var d;
function drag(objSource) {
this.select = objSource;
}

function drag.prototype.drop(objDest) {
if (!this.dragStart) return;
this.dest = objDest;

var o = this.option.cloneNode(true);
this.dest.appendChild(o);
this.select.removeChild(this.option);
alert('done!');
}

function drag.prototype.setIndex() {
var i = this.select.selectedIndex;

//i returns -1 if no option is "truly" selected
window.status="selectedIndex = "+i;
if (i==-1) return;

this.option = this.select.options[i];
this.dragStart=true;
}

function drag.prototype.dump() {
var dump = '';
for (var i in this) {
if (typeof this[i] != 'function')
dump += i + ' : ' + this[i] + ' : ' + this[i].nodeName + ' : ' + typeof this[i] + '\n';
}
alert(dump);
}
</script>
</head>
<body>
<form >

<select name="one" size="5" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.two);" onmouseout="if (typeof d != 'undefined') d.setIndex();">
<option value="opt 1">Option 1</option>
<option value="opt 2">Option 2</option>
<option value="opt 3">Option 3</option>
<option value="opt 4">Option 4</option>
<option value="opt 5">Option 5</option>
</select>

<select name="two" size="5" style="width:70px">
</select>

<p>
<select name="three" size="5" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.four);" onmouseout="if (typeof d != 'undefined') d.setIndex();">
<option value="opt 1">Option 1</option>
<option value="opt 2">Option 2</option>
<option value="opt 3">Option 3</option>
<option value="opt 4">Option 4</option>
<option value="opt 5">Option 5</option>
</select>

<select name="four" size="5" style="width:70px">
</select>

<br>
</form>
<input type="button" value="Dump Properties" onClick="if (typeof d != 'undefined') d.dump()" />
</body>
</html>
simoinfonet
04-21-2008, 03:22 PM
selecting an option is invoked by an onclick event which is composed of onmousedown and onmouseup events.
that's why you have to *click* first the option before you can drag it.

beetle, i fixed your code :)
i think it's better to wrap the events inside the select tag itself than to the form.


<html>
<head>
<title>Testing</title>

<script language="javascript" type="text/javascript">
var d;
function drag(objSource) {
this.select = objSource;
}

function drag.prototype.drop(objDest) {
if (!this.dragStart) return;
this.dest = objDest;

var o = this.option.cloneNode(true);
this.dest.appendChild(o);
this.select.removeChild(this.option);
alert('done!');
}

function drag.prototype.setIndex() {
var i = this.select.selectedIndex;

//i returns -1 if no option is "truly" selected
window.status="selectedIndex = "+i;
if (i==-1) return;

this.option = this.select.options[i];
this.dragStart=true;
}

function drag.prototype.dump() {
var dump = '';
for (var i in this) {
if (typeof this[i] != 'function')
dump += i + ' : ' + this[i] + ' : ' + this[i].nodeName + ' : ' + typeof this[i] + '\n';
}
alert(dump);
}
</script>
</head>
<body>
<form >

<select name="one" size="5" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.two);" onmouseout="if (typeof d != 'undefined') d.setIndex();">
<option value="opt 1">Option 1</option>
<option value="opt 2">Option 2</option>
<option value="opt 3">Option 3</option>
<option value="opt 4">Option 4</option>
<option value="opt 5">Option 5</option>
</select>

<select name="two" size="5" style="width:70px">
</select>

<p>
<select name="three" size="5" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.four);" onmouseout="if (typeof d != 'undefined') d.setIndex();">
<option value="opt 1">Option 1</option>
<option value="opt 2">Option 2</option>
<option value="opt 3">Option 3</option>
<option value="opt 4">Option 4</option>
<option value="opt 5">Option 5</option>
</select>

<select name="four" size="5" style="width:70px">
</select>

<br>
</form>
<input type="button" value="Dump Properties" onClick="if (typeof d != 'undefined') d.dump()" />
</body>
</html>


i'm using your code but it not work in Firfoxe can you halp me to correct this probleme