Javascript 工件移动后的开始和结束位置

我正在创建一个棋盘格变化游戏。 我不熟悉jquery，但通过一些帮助，这些片段现在可以在黑板上移动了

是否有方法指示移动的开始位置和结束位置

我还想禁用所有工件移动，一旦移动了

可以在此处找到JSFIDLE：

谢谢

以下是javascript代码：

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();
}

---

如果您同意使用JQuery，这很容易（您上面的代码不包含JQuery源代码）

看看JQueryUI的可拖放小部件

下面是一段代码，允许在删除元素后检索源位置：

  $( ".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;

    }
  }); 

---

没有时间开发一个完整的答案，但要停止dragable，这里有一个我以前使用过的技巧：给你的dragableDiv一个css类，比如说“dragableDiv”（css本身可以是空的，它只是一个标记），然后在你的drop事件处理程序中，使用jquery css选择器将css类为“dragableDiv”的任何div的dragable属性设置为false另一方面，应该给目标div一个类似于td的id，然后可以在drop处理程序中挖掘出目标元素的id。已经有一段时间了，所以我可以；我记不清语法，现在必须运行。我将尝试此路径，尽管我不确定它是否适用于拖动图像。谢谢，谢谢你的帮助。您知道使用表格和图像的任何工作示例吗？我找到了一些使用文本的。我不知道如何开始。