title: YUI Datatable Drag and Drop together with Cell Editor
body: <p>I have a problem with YUI (2) Datatable and Drag and Drop combo. I have a table of items, one of them is item description which I made editable (and saveable) with YUI's TextboxCellEditor. I also made the rows draggable (so I can drop them to another container).</p>
  
  <p>But I'm stuck with two items:
  - I can only get DnD by clicking on the second column (the first one does not work)
  - I can only get it to work on the second attempt since initialization.</p>
  
  <p>Here is a snipet from my JS (simplified):</p>
  
  <pre><code>nameFormatter = function (elCell, oRecord, oColumn, oData) {
      var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
      elCell.innerHTML = '&lt;span&gt;&lt;a href="' + link + '" class="drags"&gt;' + oData + '&lt;/a&gt;&lt;/span&gt;';
  };
  descFormatter = function(elCell, oRecord, oColumn, oData) {
      elCell.innerHTML = '&lt;pre class="desc"&gt;' + oData + '&lt;/pre&gt;';
  };
  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);
  </code></pre>
  
  <p>The saveDesc function is simple Ajax call to save that items' description.
  Here is the onRowSelect function:</p>
  
  <pre><code>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();
      });
  };
  </code></pre>
  
  <p>If I just click on desc, I get the text editor, if I click on name, I get the link open.
  Like I said, when I mouseDown on the second column (description), in first attempt I get nothing. Then I click and hold the second time, and this time it works (I get a DDProxy and I can Drag and drop it to the target, everything works there).</p>
  
  <p>And the other issue is that when I click and hold on the name column, I don't get the DDProxy (I get my onRowSelect event and the correct row).</p>
  
  <p>What am I doing wrong here?</p>
  
  <p><strong>UPDATE</strong>: Resolved the first issue by using Satyams answer - removing the formatter for my cell with link.
  The second issue (only on the second click) was resolved because I added the missing <em>dd.handleMouseDown(ev.event)</em> in my <em>onRowSelect</em> function.</p>