Drag and drop entre deux Liste BOX

**simoinfonet** · 21/04/2008, 19h23

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

**Jumano** · 21/04/2008, 20h48

Bonsoir,
Tu peux peut être commencer par regarder ceci ...

**simoinfonet** · 22/04/2008, 11h19

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>

</form>
</body>
</html>
merci de votre aide

**simoinfonet** · 24/04/2008, 17h39

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>

Drag and drop entre deux Liste BOX

JavaScript

Discussions similaires

Partager

Partager