Issues with Drag and Drop of unicode in Javascript

Question 1

See this fiddle showing the main problem and some others fixed.

OK, the immediate problem - receiving an error when you dropped on a piece's starting position is that you were looking up the element by the td id name prefixed with S which happens to be the same as the span that you are dragging around:

if (tdid.length < 3) {
     spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
}

For example,

<td id="A0"...

contains span

<span id="SA0"

Note that S + A0 will always equal SA0 which is the ID of the span (piece) that you are dragging around.

There were a few other issues that I fixed:

All table cells, even ones that didn't have a piece had a draggable span. This caused some conflicts and errors when dragging around as it was removed after a drag which caused problems with the logic in the code when a piece was dragged back to where it had visited.
The item can be dropped on a td or another piece span, you need to handle both.
You lose the pointer icon after moving because it is no longer a link (a). So, I added the cursor:pointer css.

The main changes to the logic were in function drop(ev) {, specifically the code to handle drops to different locations and to get the inner span:

     tdid = ev.target.id; //td id of the target
     //if (tdid.length < 3) {
       //  spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
     //}
     //else {
      //   spanid = tdid;
     //}
     var ttd = document.getElementById(tdid);
     var tgtPieceElem;
     if( ttd.nodeName.toLowerCase()=='span')//dropped onto another piece
     {
        tgtPieceElem = ttd;
     }
     else //dropped onto table-cell
     {
        var tgtPieces = ttd.getElementsByTagName('span');
        tgtPieceElem = (tgtPieces.length==1)?tgtPieces[0]:null;
     }
     if (tgtPieceElem) {
         tgtPiece = tgtPieceElem.innerHTML; //gives code of target

and the final else to handle drop to an empty cell.

     else
     {
        ev.target.innerHTML = "";
        ev.target.appendChild(document.getElementById(src)); //append src piece into target piece
        alert(src);
     }

Besides this, I have the following recommendations: -

The links have duplicate ids for example, all pawn links have the id pawn. Ids should be unique on the page, use a class instead.
I am not sure if the links a was done because you wanted links or just to show that the elements could be clicked. If the latter, then I suggest removing the links and using the css cursor:pointer instead and css for colour styling. If you want the links, then currently the pieces are dragged without the links, so they lose them when dropped. You will need to insert the links into the new cell as well.
You probably want some class on the pieces so that you can recognize in drop that a valid piece is being dropped and exit the function if not. Currently you can drop an image or any other draggable element which causes an error in the code.
As others have mentioned, it is best to keep game logic separate from presentation. However, most of the errors were related to presentation, so you will need to do both (fix presentation errors and separate logic).

Question 2

I have actually just done this recently in JavaScript using jQuery draggable combined with click & drop events handler (so it works on mobile device too). Having read many open-source code, here are the arrangement I make to get everything work together beautifully.

Assign 2 dictionaries (array in JavaScript?) using chess unicode & FEN string, unicode can be used as both "Key" and "Value", like this:

PIECE = {
    P:'♙', R:'♖', N:'♘', B:'♗', Q:'♕', K:'♔',
    p:'♟', r:'♜', n:'♞', b:'♝', q:'♛', k:'♚',
};

// Reversed engineering to convert positional objects => fen string
// FEN_PIECE is used as a mirror array as in PIECE
FEN_PIECE = {
    '♙': 'P', '♖': 'R', '♘': 'N', '♗': 'B', '♕': 'Q', '♔': 'K',
    '♟': 'p', '♜': 'r', '♞': 'n', '♝': 'b', '♛': 'q', '♚': 'k',
};


// Empty position dictionary for board creation
// after chess movement, we capture on board pieces and insert into this
// so the dictionary keys: values pattern will be always the same
EMPTY_POSITION = {
    A8: "", B8: "", C8: "", D8: "", E8: "", F8: "", G8: "", H8: "",
    A7: "", B7: "", C7: "", D7: "", E7: "", F7: "", G7: "", H7: "",
    A6: "", B6: "", C6: "", D6: "", E6: "", F6: "", G6: "", H6: "",
    A5: "", B5: "", C5: "", D5: "", E5: "", F5: "", G5: "", H5: "",
    A4: "", B4: "", C4: "", D4: "", E4: "", F4: "", G4: "", H4: "",
    A3: "", B3: "", C3: "", D3: "", E3: "", F3: "", G3: "", H3: "",
    A2: "", B2: "", C2: "", D2: "", E2: "", F2: "", G2: "", H2: "",
    A1: "", B1: "", C1: "", D1: "", E1: "", F1: "", G1: "", H1: ""
};

and for the Chess board itself, loop through the rows & columns under with

<div class="piece" draggable="true"> will put chess piece here later </div>

using conversion between board position & FEN strings (I use FEN as the main game library, and convert to board position to draw the "pieces" dynamically).

and using PIECE[FEN string] & FEN_PIECE[piece] to retrieve the board position and pieces information.

then for the UI bits:

just set a few global variables when initializing the board:

var targetId
var sourceId
var clicked_id;
var clicked_piece;

and

on 'dragstart [draggable=true]': function(ev) {
  sourceId = ev.target.parentNode.id;
  piece = e.target.innerHTML;
}

since you have done this already so I will not go through again, and to get click & drop working, you just need to assign a class on element click:

on 'click .clicked': function(ev) {
  $(ev.target).toggleClass("clicked");
  try { your Chess move here... using sourceId, piece} 
  catch(err) { what not here... }
}

check if any "clicked" class already on the board other then itself, then it means a "drop" move.

to assign the board div id as A1 to H8, just do a simple loop:

var ROW = '12345678'.split("");
var COL = 'ABCDEFGH'.split("");
for (var r=1; r<=ROW.length; r++) {
  for (var c=1; c<=COL.length; c++) {
    //just assign your table tr td div to with id attribute here...
  }
}

So you do not really need to use colour to check the element, just back to basic div drag and click. I am not sure whether this helps you but I hope you get the idea or perhaps can think in another approach. There are too many libraries out there that you can study and see what the best will suit your situation, good luck!