我想實現兩個列表框之間的拖放。如何在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>