如何获得可拖动元素掉落的值？

【问题标题】：How do I get a value where a drag-able element dropped?如何获得可拖动元素掉落的值？
【发布时间】：2014-10-15 18:22:24
【问题描述】：

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

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

如何获取我放置元素的表格单元格的 ID？

这是图片的概念。

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

【问题讨论】：

您是在使用 jQuery 还是尝试在纯 JavaScript 上构建它。
向我们展示您的代码并制作小提琴 :)
@DeepakBiswal 我使用 jQuery 可拖动和捕捉功能将元素粘贴到表格单元格。
检查this 我认为这对你有用。有目标元素引用的“drop”方法。
@BojanPetkovski 这是jsfiddle.net/81ja79Ls/1 :)

标签： javascript jquery html

【解决方案1】：

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

比什么是细胞？分区？吗？输入？

你可以jsfiddle吗？

-编辑。

你需要这样的东西：

jsfiddle

您只能将脚本更改为：

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

【讨论】：

这是 jsfiddle jsfiddle.net/81ja79Ls/1 我使用作为表格单元格。
正如@Bojan Petkovski 所说，您还可以添加“alert($(this).attr("id"));”在脚本中

【解决方案2】：

这是工作的fiddle。

试试这样的：

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

【讨论】：

【解决方案3】：

检查这个fiddle。

首先，您需要通过定义ondragover 事件回调来启用要拖动的表格单元格。在小提琴中：

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

preventDefault 确保浏览器不对元素设置下拉锁定。

然后您只需使用事件数据，如下所示：

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

toElement 持有对您放置的元素的引用，您可以从中获取所需的所有数据，包括id。

【讨论】：

【解决方案4】：

你需要像这样改变你的脚本

$(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您要放入的元素:)

例如http://jsfiddle.net/81ja79Ls/4/

【讨论】：