Bonjour les amis ,j'ai un grand probleme je cherche a faire de drag and drop entre deux listes (bascule d'élement à l'aide de drag and drop) mais vu que je suis un debutant en JS j'arrive pas si qq 1 peut m'aide STP merci d'avance:cry::cry:
Version imprimable
Bonjour les amis ,j'ai un grand probleme je cherche a faire de drag and drop entre deux listes (bascule d'élement à l'aide de drag and drop) mais vu que je suis un debutant en JS j'arrive pas si qq 1 peut m'aide STP merci d'avance:cry::cry:
Bonsoir,
Tu peux peut être commencer par regarder ceci ...
merci jumano de votre initiative mais le problème c'est que je veut faire a l'aide d'un drag and drop.
j'ai réussit a faire ca mais le problème c'est quelle marche pas sur firefoxe en plus je veut un drag and drop de plusieurs élément (multiselect)
voila mon code
<html>
<head>
<title>Testing</title>
<script language="javascript" type="text/javascript" src="prototype.js"></script>
<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" multiple="multiple" 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" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.one);" onmouseout="if (typeof d != 'undefined') d.setIndex();">
</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>
</body>
</html>
merci de votre aide :oops:
:yaisse2:
super j'ai réussie a le monter moi même alors c'est bien pour nous tous
<html>
<head>
<title>Testing</title>
<script language="javascript" type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript">
var d;
drag=function (objSource) {
this.select = objSource;
getSelected(objSource);
}
//ajout d'une fonction dynamique a la classe drag
drag.prototype.drop=function (objDest,objSource) {
if (!this.dragStart) return;
addelement(objDest,objSource);
selectedList=Array();
}
drag.prototype.setIndex=function () {
var i = this.select.selectedIndex;
window.status="selectedIndex = "+i;
if (i==-1) return;
this.option = this.select.options[i];
this.dragStart=true;
}
var selectedList=new Array();
function isexist(element,object){
var exist=0;
for(var i=0;i<object.options.length;i++){
if(object.options[i].value==element){
exist+=1;
}
//alert(element + ":" + object.options[i].value);
}
return exist;
}
function addelement(selectBox,selectDest){
var sommet=selectBox.options.length;
for (var i=0; i<selectedList.length; i++){
if(isexist(selectedList[i].value,selectBox)==0){
selectBox.options[sommet]=new Option(selectedList[i].text,selectedList[i].value, false)
selectDest.removeChild(selectedList[i]);
sommet++;
}
else
{
//continue
}
}
}
function getSelected(selectBox){
for (var i=0; i<selectBox.options.length; i++) {
if (selectBox.options[i].selected==true) {
selectedList.push(selectBox.options[i]);
}
}
}
</script>
</head>
<body>
<form >
<table width="400">
<tr>
<td>
<select name="one" size="5" multiple="multiple" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.two,this.form.one);" 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>
</td>
<td>
</td>
<td>
<select name="two" size="5" style="width:70px" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.one,this.form.two);" onmouseout="if (typeof d != 'undefined') d.setIndex();">
<option value="opt 1">Option 1</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>:yaisse2: