How do I drag and drop between two listboxes in XUL?
- by pc1oad1etter
I am trying to implement drag and drop between two listboxes.
I have a few problems
1) I am not detecting any drag events of any kind from the source list
box/ I do not seem to be able to drag from it
2) I can drag from my desktop to the target listbox and I am able to
detect 'dragenter' 'dragover' and 'dragexit' events. I am noticing
that the event parameter is undefined in my 'dragenter' callback - is
this a problem?
3) I cannot figure out how to complete the drag and drop operation.
From https://developer.mozilla.org/En/DragDrop/Drag_Operations#Performing_...
"If the mouse was released over an element that is a valid drop
target, that is, one that cancelled the last dragenter or dragover
event, then the drop will be successful, and a drop event will fire at
the target. Otherwise, the drag operation is cancelled and no drop
event is fired."
This seems to be referring to a 'drop' event, though there is not one
listed at https://developer.mozilla.org/en/XUL/Events . I can't seem
to detect the end of the drag in order to call one of the example
'doDrop()' functions that I find on MDC.
My example, so far: http://pastebin.mozilla.org/713676
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul"
onload="initialize();">
<vbox>
<hbox>
<vbox>
<description>List1</description>
<listbox id="source" draggable="true">
<listitem label="1"/>
<listitem label="3"/>
<listitem label="4"/>
<listitem label="5"/>
</listbox>
</vbox>
<vbox>
<description>List2</description>
<listbox id="target" ondragenter="onDragEnter();">
<listitem label="2"/>
</listbox>
</vbox>
</hbox>
</vbox>
<script type="application/x-javascript">
<![CDATA[
function initialize(){
jsdump('adding events');
var origin = document.getElementById("source");
origin.addEventListener("drag", onDrag, false);
origin.addEventListener("dragdrop", onDragDrop, false);
origin.addEventListener("dragend", onDragEnd, false);
origin.addEventListener("dragstart", onDragStart, false);
var target = document.getElementById("target");
target.addEventListener("dragenter", onDragEnter, false);
target.addEventListener("dragover", onDragOver, false);
target.addEventListener("dragexit", onDragExit, false);
target.addEventListener("drop", onDrop, false);
target.addEventListener("drag", onDrag, false);
target.addEventListener("dragdrop", onDragDrop, false);
}
function onDrag(){
jsdump('onDrag');
}
function onDragDrop(){
jsdump('onDragDrop');
}
function onDragStart(){
jsdump('onDragStart');
}
function onDragEnd(){
jsdump('onDragEnd');
}
function onDragEnter(event){
//debugger;
if(event){
jsdump('onDragEnter event.preventDefault()');
event.preventDefault();
}else{
jsdump("event undefined in onDragEnter");
}
}
function onDragExit(){
jsdump('onDragExit');
}
function onDragOver(event){
//debugger;
if(event){
//jsdump('onDragOver event.preventDefault()');
event.preventDefault();
}else{
jsdump("event undefined in onDragOver");
}
}
function onDrop(event){
jsdump('onDrop');
var data = event.dataTransfer.getData("text/plain");
event.target.textContent = data;
event.preventDefault();
}
function jsdump(str)
{
Components.classes['[email protected]/consoleservice;1']
.getService(Components.interfaces.nsIConsoleService)
.logStringMessage(str);
}
]]>
</script>
</window>
