Drag behavior for text being dragged into datatable is incomplete/odd

[kevroy314]

Editable datatables are powerful awesome ways to let your users configure various application data members. I've been working to implement a convenience feature that allows users to drag text (using the typical html drag via a client side callback) into cells to quickly populate them. This involves adding the draggable=true property to the Span containing the text, then attaching a callback of the flavor of:

item.addEventListener("dragstart", function(e) {
        e.dataTransfer.setData('text/plain', item.innerText);
}, false);

You could do this with the EventListener extension too I imagine to make it more Dash-like.

The issue (which doesn't require you to implement that, just find a draggable element like this: https://www.kryogenix.org/code/browser/custom-drag-image.html and test with it) is that the only time the transferred data actually gets put into the cell is if the cell is already in focus/highlighted AND is empty. So a cell in focus with text in it already will not receive the transfer. A cell not in focus but empty will also not receive the data.

Some screenshots to illustrate:

Successfully dragging text into a cell:

All other instance (note the red No symbol where the mouse is):

One other oddity I've noticed is that very occasionally, you can drag text onto a cell which already contains text AND is in focus, and it will just prepend the text to the left. I can't seem to reliably reproduce this behavior though.

One thought I had was to manually modify the focus on mouseover or mouseup while the drag event is in process, but I would also need to go in and delete existing data on mouseup which seems problematic.

This behavior applies to any editable data table, but please let me know if my description is insufficient.