我想实现两个列表框之间的拖放。如何在XUL中的两个列表框之间拖放?
我有几个问题
1)我没有检测到任何类型的从源列表中的任意拖拽事件 箱/我似乎不能够从它
2)我拖可以从我的桌面拖到目标列表框,我可以检测'dragenter''dragover'和'dragexit'事件。我注意到 ,我的'dragenter'回调中的事件参数未定义 - 是 这是一个问题吗?
3)我想不出如何完成拖放操作。 From https://developer.mozilla.org/En/DragDrop/Drag_Operations#Performing_ ... “如果鼠标是通过一个有效下落的元素释放的,也就是取消最后一个dragenter或dragover事件的元素,那么放置将会成功,并且放置事件将会消防 的目标,否则,拖动操作被取消,并没有下降事件被触发。“
这似乎是指'下降'事件,虽然没有一个 列在https://developer.mozilla.org/en/XUL/Events。我似乎无法通过 来检测拖动的结尾,以便调用我在MDC上找到的示例 'doDrop()'函数。
我的例子,到目前为止: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>