Javascript 如何在拖放元素的位置获取值？

我现在正在开发一个网站，可以将元素拖放到表格单元格中（每个单元格都有其“ID”）

现在我可以将元素拖放到单元格中，但我想知道

• 如何获取我丢弃元素的表单元格的ID

这是图片的概念

---

假设单元格的ID是行数和列数的组合。

首先需要重命名ID，因为一个ID不能以数字开头。你至少需要一个字母，例如“ID11”“ID12”

细胞是什么？迪夫？Td？输入

你能帮我个忙吗

-编辑

你需要这样的东西：

您只能将SKcript更改为：

$(function() {
    $("#draggable").draggable({ snap: ".drop"});
    $(".drop").droppable({
        drop: function(event, ui){
         console.log("Dropped to" + $(".drop").attr("id"));
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
    }
  });
  });

看看这个

首先，需要通过定义

ondragover

事件回调来启用要拖动到的表单元格。在小提琴中：

box.ondragover = function (evt) { evt.preventDefault(); };

preventDefault

确保浏览器不会在元素上设置下拉锁

然后您只需处理事件数据，如下所示：

box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };

$(function() {
    $("#draggable").draggable({ snap: ".drop"});
    $(".drop").droppable({
        drop: function(event, ui){
         console.log($(this).attr('id'));
    }
  });
  });

---

toElement

保存对您放置的元素的引用，您可以从中获取所需的所有数据，包括

id

您需要像这样更改脚本

$(function () {
    $("#draggable").draggable({
        snap: ".drop"
    });
    $(".drop").droppable({
        drop: function (event, ui) {
            alert($(this).attr("id"));
            console.log("Dropped to " + $(this).attr("id"));
        }
    });
});

将$（“.drop”）.attr（“id”）更改为$（this.attr（“id”），以获取要放入的元素的id:）

示例

以下是工作原理

试着这样做：

box.ondrop = function (evt) { droppedTo.innerHTML = evt.toElement.id; };

$(function() {
    $("#draggable").draggable({ snap: ".drop"});
    $(".drop").droppable({
        drop: function(event, ui){
         console.log($(this).attr('id'));
    }
  });
  });

---

你是在使用jQuery还是试图在普通JavaScript上构建它。向我们展示你的代码并做一个小摆设：）@DeepakBiswal我使用jQuery Dragable和snap函数将元素粘贴到表单元格。检查我认为这对你有用。有一个“drop”方法，您可以在其中使用目标元素引用。@BojanPetkovski这里是：）这是我用作表格单元格的JSFIDLE。正如@Bojan Petkovski所说的，您还可以在脚本中添加“alert（$（this）.attr（“id”）；”谢谢@迪帕克·比斯瓦尔