Javascript YUI数据表与单元格编辑器一起拖放

我对YUI（2）Datatable和拖放组合有问题。我有一个项目表，其中一个是项目描述，我用YUI的TextboxCellEditor使其可编辑（并可保存）。我还使这些行可以拖动（这样我就可以将它们放到另一个容器中）

但我有两个问题： -我只能通过点击第二列获得DnD（第一列不起作用） -我只能在初始化后的第二次尝试中使用它

这是我的JS（简化版）中的一个狙击手：

如果我只点击desc，我会得到文本编辑器，如果我点击name，我会打开链接。 正如我所说，当我在第二列（描述）上鼠标向下移动时，第一次尝试时什么也没有得到。然后我点击并按住第二次，这一次它工作了（我得到了一个DDProxy，我可以将它拖放到目标，一切都在那里工作）

另一个问题是，当我点击并按住name列时，我没有得到DDProxy（我得到了onRowSelect事件和正确的行）

我做错了什么

更新：通过使用Satyams answer解决了第一个问题-使用链接删除我的单元格的格式化程序。

---

第二个问题（仅在第二次单击时）得到解决，因为我在onRowSelect函数中添加了缺少的dd.handleMouseDown（ev.event）。

编写dd的Dav Glass在他的页面中有一个例子：我在我的示例中使用了它：它工作得很好，尽管它比您的例子要复杂一些。很抱歉，我无法更准确地帮助您解决您的问题，D&D不是我的重点，但我希望这些示例可能会有所帮助

问题的一个原因可能是单元格中的链接。无论你是否有DD，这都不是一个好主意。一般来说，处理此问题的建议方法是侦听cellClickEvent，如果单击的单元格列是“导航”列，则根据单击的记录中的信息构建URL，然后导航或使用它执行任何操作。这使得DataTable的呈现速度更快，因为它不需要格式化程序，而且在有人单击单元格的奇怪事件中，只有在这种情况下，您才会费心进行计算。页面上DOM元素的大小和数量也会下降

---

同样，对于另一个带有预格式化标记的单元格，您可以轻松避免它。DataTable中每列中的单元格都会从“yui dt col-”前缀和列的“key”值（例如：yui dt col description）中获取CSS类名。因此，您可以简单地为该CSS类名添加样式声明，并节省格式化程序。同样，为了突出显示可编辑单元格，为.yui dt editable:hover选择器定义一些样式如何？我自己从来没有做过，但我想它应该会起作用。

谢谢，这是一大堆有用的建议+1关于避免格式化程序，如果可以的话，我会给你另一个链接建议。我还将测试这是否解决了我的问题，如果解决了，我也会接受答案。Re：突出显示可编辑行，这是直接从YUI页面获得的。好吧，就是这样。你现在被正式标记为：）现在剩下的是一个文件上传器的DragAndDrop。在这方面有什么资源吗？嗯，去掉了格式化程序，一切都正常了，但我仍然有问题的第一部分。我必须鼠标向下移动两次，第一次DnD仍然不起作用：/

nameFormatter = function (elCell, oRecord, oColumn, oData) {
    var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
    elCell.innerHTML = '<span><a href="' + link + '" class="drags">' + oData + '</a></span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
    elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
    {key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
    , {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
    MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
    var elCell = oArgs.target;
    if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
        this.highlightCell(elCell);
    }
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);

onRowSelect = function(ev) {
    console.log(" == method onRowSelect");
    var tar = Event.getTarget(ev)
      , dd
    ;
    dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
    dd.on('dragDropEvent', function(e) {
        YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
        dd.unreg();
    });
};