Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drag and drop from on select box to select box

    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!

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 !

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A "widget" is a custom-made control, for instance look here:

    Web FX

    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 [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's gonna be tough. Finding the right events to trigger stuff will be key. I'll mess with it tomorrow I think....
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #7
    New Coder
    Join Date
    Jun 2002
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ):

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

    Code:
    <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>

  • #10
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Help!!???

    Quote Originally Posted by glenngv View Post
    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.

    Code:
    <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

  • #11
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drag and drop from on select box to select box Reply to Thread

    hello this code not work on Mozilla and chrome so please help me
    thanks ajay

    <html>
    <head>
    <title>Testing</title>
    <style type="text/css">
    body { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }
    </style>
    <script language="javascript" type="text/javascript">

    var d = 0;
    function drag() {
    this.select = source();
    if (this.select.nodeName != "SELECT") return;
    }

    function drag.prototype.drop(objDest) {

    source()=this.dest ;
    this.dest.id =this.destID;

    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(this);" 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>
    <form onMouseDown="d = new drag();" onMouseUp="d.drop(d);" onMouseOut="if (typeof d != 'undefined') d.setIndex();">

    <select id="three" size="5" multiple="multiple" >
    <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="four" size="5"multiple="multiple">
    </select>

    <br>
    </form>
    tt<select id="five" size="5" multiple="multiple" style="width:50px;">
    </select>

    <!--<input type="button" value="Dump Properties" onClick="d.dump()" />-->
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •