Dojo擴展dojo.dnd.Source，移動不會發生。想法？

Question

注意：這已解決，我會盡快在此發佈解決方案。

嘿，

好吧......我有一個最基本的要素一個簡單的道場頁面。三個UL和一些LI在其中。想法si允許它們之間的拖放，但如果由於最後一個項目被拖出而導致UL變空，我會向用戶發出一條消息，向他們發出一些指令。

爲了做到這一點，我想擴展dojo.dnd.Source dijit並添加一些智能。這似乎很容易。爲了保持簡單（我從CDN加載Dojo）我只是聲明我的擴展，而不是在模塊加載時完成。聲明功能在這裏...

function declare_mockupSmartDndUl(){ 
dojo.require("dojo.dnd.Source"); 
dojo.provide("mockup.SmartDndUl"); 
dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, { 
    markupFactory: function(params, node){ 
     //params._skipStartup = true; 
     return new mockup.SmartDndUl(node, params); 
    }, 
    onDndDrop: function(source, nodes, copy){ 
     console.debug('onDndDrop!');  
     if(this == source){ 
      // reordering items 
      console.debug('moving items from us'); 
      // DO SOMETHING HERE 
     }else{ 
      // moving items to us 
      console.debug('moving items to us'); 
      // DO SOMETHING HERE 
     } 

     console.debug('this = ' + this); 
     console.debug('source = ' + source); 
     console.debug('nodes = ' + nodes); 
     console.debug('copy = ' + copy); 
     return dojo.dnd.Source.prototype.onDndDrop.call(this, source, nodes, copy); 
    } 
}); 
} 

我有一個初始化函數中使用此裝飾列表...

dojo.addOnLoad(function(){ 
declare_mockupSmartDndUl(); 
if(dojo.byId('list1')){ 
    //new mockup.SmartDndUl(dojo.byId('list1')); 
    new dojo.dnd.Source(dojo.byId('list1')); 
} 

if(dojo.byId('list2')){ 
    new mockup.SmartDndUl(dojo.byId('list2')); 
    //new dojo.dnd.Source(dojo.byId('list2')); 
} 

if(dojo.byId('list3')){ 
    new mockup.SmartDndUl(dojo.byId('list3')); 
    //new dojo.dnd.Source(dojo.byId('list3')); 
} 
}); 

它是儘可能去罰款，你會發現我將「list1」作爲標準dojo dnd來源進行測試。

問題是這樣的 - list1會高興地接受列表中的項目2 & 3誰將移動或複製爲apprriate。但是列表2會拒絕接受來自list1的項目。就好像DND操作被取消一樣，但是調試器確實顯示了dojo.dnd.Source.prototype.onDndDrop.call發生，並且參數看起來對我來說還好。

現在，這裏的文檔非常薄弱，所以我採取了一些這樣的例子可能會過時（我使用1.4）。

任何人都可以填寫我的擴展dijit可能是什麼問題？

謝謝！

Answer 1

最後，我打了Dojo IRC（偉大的人！），我們結束了（到目前爲止）這...

function declare_mockupSmartDndUl(){ 
    dojo.require("dojo.dnd.Source"); 
    dojo.provide("mockup.SmartDndUl"); 
    dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, { 
     markupFactory: function(params, node){ 
      //params._skipStartup = true; 
      return new mockup.SmartDndUl(node, params); 
     }, 
     onDropExternal: function(source, nodes, copy){ 
      console.debug('onDropExternal called...'); 

      // dojo.destroy(this.getAllNodes().query(".dndInstructions")); 
      this.inherited(arguments); 

      var x = source.getAllNodes().length; 
      if(x == 0){ 
       newnode = document.createElement('li'); 
       newnode.innerHTML = "You can drag stuff here!"; 
       dojo.addClass(newnode,"dndInstructions"); 
       source.node.appendChild(newnode); 
      } 

      return true; 
      // return dojo.dnd.Source.prototype.onDropExternal.call(this, source, nodes, copy); 
     } 
    }); 
} 

而且你可以看到我的標題，我把消息來源爲空時的消息（客戶端規格，ug！），並且我需要找到一種方法來殺死它，因爲拖動了某些東西（因爲根據定義，它不是空的，所有的東西都是空的）。這部分工作如此順利。

無論如何，魔術不是使用onDnd_____函數，而是使用更高級別的函數，然後調用this.inherited（參數）來觸發內置函數。

謝謝！

Answer 2

如果您使用Dojo XD loader（與CDN一起使用），則所有dojo.require()都是異步的。然而declare_mockupSmartDndUl()假定只要它需要dojo.dnd.Source它是可用的。一般不保證。

另一個挑剔：dojo.dnd.Source不是widget/dijit，它是可編寫腳本的，可以與Dojo標記一起使用，它不實現任何Dijit的接口。

現在的問題—要覆蓋的方法有以下定義1.4：

onDndDrop: function(source, nodes, copy, target){ 
    // summary: 
    //  topic event processor for /dnd/drop, called to finish the DnD operation 
    // source: Object 
    //  the source which provides items 
    // nodes: Array 
    //  the list of transferred items 
    // copy: Boolean 
    //  copy items, if true, move items otherwise 
    // target: Object 
    //  the target which accepts items 
    if(this == target){ 
     // this one is for us => move nodes! 
     this.onDrop(source, nodes, copy); 
    } 
    this.onDndCancel(); 
}, 

注意，它有4個參數，而不是3。正如你可以看到，如果你沒有通過4個參數，onDrop永遠不會被父方法調用。

修復這兩個問題，很可能你會得到你想要的。

Answer 3

dojo.require("dojo.dnd.Source"); 
dojo.provide("mockup.SmartDndUl"); 
dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, { 

Dojo要求語句和聲明語句緊挨着下一個。我認爲這會導致依賴性問題。

dojo require語句應該放在onload塊之外，並且declare語句應該放在onload塊中。