Question

我现在正在开发一个可以拖动元素并放入表格单元格的网站（每个单元格都有“ID”）

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

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

这是图片的概念。

enter image description here

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

Answer 1

首先，您需要重命名您的ID，因为一个ID无法以数字开头。你只需要一个字母，例如“ID11”“ID12”......

比什么是细胞？ DIV？ TD？输入

你能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!" );
    }
  });
  });

Answer 2

选中fiddle。

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

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

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

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

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

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

Answer 3

您需要像这样更改脚本

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

从 $（＆＃34; .drop＆＃34;）。attr（＆＃34; id＆＃34;）更改为 $（this）.attr（＆＃34 ; id＆＃34;）获取您要放入的元素的ID：）

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

Answer 4

这是工作fiddle。

尝试这样的事情：

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

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

4 个答案: