Question

I am creating a checker variation game.
I am new to jquery but through some help the pieces can now move around the board.

Is there a way to indicate the start location and end location of a move?

I would also like to disable all piece movement once a move has been made.

jsfiddle can be found here: http://jsfiddle.net/blueberrymuffin/mwu3u/1/

Thanks.

Here is the javascript code:

function drag(ob){       
  ob.dataTransfer.setData("Text",ob.target.id);     
}

function drop(ob){
  var id = ob.dataTransfer.getData("Text");     
  var t = ob.target;    
  if (ob.target.nodeName == "IMG")
    t = ob.target.parentNode;
  t.innerHTML = "";
  var img = document.getElementById(id);
  t.appendChild(img);
  ob.preventDefault();    
}

function allowDrop(ob){
  ob.preventDefault();
}

Answer 1

It is easily if you agree to use JQuery (your code above doesn’t contain JQuery source code)

Have a look on the JQueryUI draggable and droppable widget http://jqueryui.com/

Here is a piece of code permitting to retrieve the source location after element dropping :

  $( ".cases" ).droppable({ 
    drop: function(event, ui) {
        console.log(event.target.id);
        console.log(ui.draggable[0].parentElement.id);

        var target = event.target.id;
        var source = ui.draggable[0].parentElement.id;

    }
  });