Drag and Drop between two select Objets

来源：互联网发布：网络机顶盒安装编辑：程序博客网时间：2024/05/23 16:54

Drag and Drop between two select Objets

Move one element and you will see the select objects follow the element drap or drop

Home

Drag Elements Drop Elements

Alain.M

ça

m'amuse

excellent

super

bien

bon

well

good

very

it's

funny

You can drap and drop or the form

The select Objects Drag Drop

If you want to do the same thing you must do this :

You must load the javascript DragAndDrop.js

In your HTML page put on tag body
<body onload="_initDragEtDrop(event)">

In your HTML page you must create one div 't1' where you want to print the Drag and Drop
<div id="t1" > < /div>

In your HTML page you must load the script "DragAndDrop.js" with instruction :
<script src="DragAndDrop.js" type="text/javascript" language="javascript"></script>

In your page HTML you must have 2 tags <select> named "drag" and "drop", like this
<select name="drag" .... >
<select name="drop" .... >
If you want put a "Reset Button", you can use the function ResetDragAndDrop(event), like this
<input type="button" value="reset" on click="ResetDragAndDrop(event)" />

An example

<html>
<head>
</head>
<body onload="_initDragEtDrop(event)">

<div id="t1">
<br>
<br>
<br>
<br>
Drag et Drop
</div>
<form>
<div style="display: none; visibility: hidden">
<select name="drag" >
        <option value="bon">bon</option>
        <option value="aimable">aimable</option>
</select>
<select name="drop">
        <option value="mauvais">mauvais</option>
        <option value="drole">drole</option>
</select>
</div>
<input type="submit" onclick="print_your_choice('drag'); print_your_choice('drop')"/>
</form>

<script type="text/javascript">
function print_your_choice(elem)
{
var select=document.getElementsByName(elem)[0];
var o=select.options;
var v=' ';
for (i=0;i<o.length;i++) {
        v=v+' '+o[i].value;
}
alert(elem+'='+v);
}
</script>
<script src="DragAndDrop.js" type="text/javascript" language="javascript"></script>

</body>
</html>