Javascript 在表单元格的边框上拖放时未激发拖放事件

我正在使用jQueryUIDragable插件将div拖到一个表中

我的问题是，有时当拖动到表格单元格中时，我会感觉到drop事件没有被触发。这似乎发生在恰好放置在分隔两个单元格（垂直或水平）的一个像素上时。我已尝试将边界设置为0，但仍然存在问题

---

看看这个<代码>

工作演示或

公差

选项应设置为

触摸

以获得更好的拖动功能：）

或使用

指针

作为容差：鼠标指针与可拖放对象重叠

好书：

行为：现在，当您将say“1”拖动到表格单元格时，触摸会触发表格中的下降，其余的您可以在演示中看到

希望这有帮助

下面的一行就可以做到这一点：

公差：“触摸”，

代码

$(".dragbox").draggable({
    revert: true
});

$("table tr td").droppable({
    accept: ".dragbox",
    tolerance: "touch",
    drop: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        }).html(ui.draggable.find('span').text());
    },
    over: function(event, ui) {
        $(this).css({
            'background-color': '#DCFFDB'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        });
    }
});​

---

工作演示或

公差

选项应设置为

触摸

以获得更好的拖动功能：）

或使用

指针

作为容差：鼠标指针与可拖放对象重叠

好书：

行为：现在，当您将say“1”拖动到表格单元格时，触摸会触发表格中的下降，其余的您可以在演示中看到

希望这有帮助

下面的一行就可以做到这一点：

公差：“触摸”，

代码

$(".dragbox").draggable({
    revert: true
});

$("table tr td").droppable({
    accept: ".dragbox",
    tolerance: "touch",
    drop: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        }).html(ui.draggable.find('span').text());
    },
    over: function(event, ui) {
        $(this).css({
            'background-color': '#DCFFDB'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        });
    }
});​

---

我的建议是使用“触摸”公差选项，但删除拖动表的边距，因为它们会给正确的功能带来问题。相反，对draggables使用一个包装div，并给该div一些余量。这可能会有帮助

此外，我建议您增加td的宽度和高度，以查看正确的工作状态

编辑：

---

试试这个，我想我找到了解决方案。我建议使用“触摸”公差选项，但删除拖动表的边距，因为它们会给正确的功能带来问题。相反，对draggables使用一个包装div，并给该div一些余量。这可能会有帮助

此外，我建议您增加td的宽度和高度，以查看正确的工作状态

编辑：

---

试试这个，我想我找到了解决办法

多亏了Tejasva Dhyani的评论和Tats_Inni的聊天，我找到了答案：

当拖放div正好位于两个可拖放元素（单元格）之间时，jQuery会感到困惑（这是理所当然的）

也就是说，如果在15px超过一个单元而15px超过另一个单元时丢弃，则不会触发丢弃事件

---

我所做的只是将宽度和高度设置为一个不均匀的数字，：

多亏了Tejasva Dhyani的评论并与Tats_innit聊天，我找到了答案：

当拖放div正好位于两个可拖放元素（单元格）之间时，jQuery会感到困惑（这是理所当然的）

也就是说，如果在15px超过一个单元而15px超过另一个单元时丢弃，则不会触发丢弃事件

---

我所做的只是将宽度和高度设置为一个不均匀的数字，：

期望的结果是什么……因为我认为你只能在可放下的灯亮起时放下（高亮显示）@Tejasva Dhyani我想让它不可能在放下桌子时“丢失”可拖动的div-希望有人感兴趣，这里是真实的情况-不用说还在测试阶段：期望的结果是什么…因为我认为只有当可拖放设备亮起（高亮显示）时才能拖放@Tejasva Dhyani我想让它不可能在桌面上“丢失”可拖放分区-希望它有意义如果有人感兴趣，这里是真实的情况——在beta版中不必提及：谢谢，但是您的JSFIDLE示例删除了许多单元格，您编辑的链接有原始问题。使用您的第一个链接，我可能能够确定哪个单元格离指针最近，然后只高亮显示那个单元格，在拖放时只拖放到那个单元格。但我真正的表是15x15，它可能会减慢速度…实际上默认情况下的公差是“相交”，这意味着至少50%的相交。因此，您可以做的是删除td的边框，并放置一个虚拟表（具有较低的z索引），并将其精确放置在表所在的位置。这样就会有一个td（总是），其中Dropable的存在率超过50%。。。另外，在棋盘游戏中做得很好谢谢，但是您的JSFIDLE示例会从许多单元格中删除，您编辑的链接有原始问题。使用您的第一个链接，我可能能够确定哪个单元格离指针最近，然后只高亮显示那个单元格，在拖放时只拖放到那个单元格。但我真正的表是15x15，它可能会减慢速度…实际上默认情况下的公差是“相交”，这意味着至少50%的相交。因此，您可以做的是删除td的边框，并放置一个虚拟表（具有较低的z索引），并将其精确放置在表所在的位置。这样就会有一个td（总是），其中Dropable的存在率超过50%。。。另外，在棋盘游戏方面也做得很好