javascript - 从拖动的元素中获取父数据元素 - 拖放功能
问题描述
我正在尝试data-date
在 JavaScript 中检索拖动对象的父数据属性。所以我想<td>
从div
“拖动我”的位置接收数据日期属性。
HTML 示例:
<td data-date="2/3/2020">
<div>drag me</div>
</td>
<td data-date="3/3/2020">
<-- DIV "Drag Me" will be dragged to this location --!>
</td>
我能够检索删除的数据日期属性,但无法弄清楚如何检索从数据日期属性中拖动的内容。
JS From 和 TO 当前代码
dropped = ui.draggable,
newDate = $(this).data('date'),
console.log('Date From :' + dropped.data('date')); // needs to be found
console.log('Date To:' + newDate); // Works correctly
解决方案
我找到了一种解决方法,可以将信息从可拖动函数传递到可放置函数
在下面的示例中,我首先从可拖动函数中的父元素获取数据日期值。检索到这些数据后,我们将值从可拖动的函数传递给可放置的函数。
我们将变量命名为oldDate,以便我们可以通过调用“ui.draggable.data('oldDate')”在可放置函数中访问它。我会在下面为你们提供一个示例代码。
可拖动功能:
$(".drag").draggable({
cursor: "crosshair",
revert: "invalid",
start: function(event, ui) {
var oldDate = $(this).parent().data('date'); // get value from parent data-date attribute
$(this).data('oldDate', oldDate); // pass variable to droppable function
}
});
可丢弃功能:
$("td[data-date]").droppable({
accept: ".drag",
activeClass: "over",
drop: function(event, ui) {
var displayOldDate = ui.draggable.data('oldDate'); // access the variable saved in draggable function
console.log('Dragged from: ' + displayOldDate);
}
});
推荐阅读
- java - 带有 tomcat 8.5 和 java 8 lambda x 的 AWS Elastic Beanstalk 无法解析为变量
- javascript - 如何从基本视图覆盖 render() 方法并向模板添加更多选项?
- php - centos 7上的PHP版本切换
- python - 检查对象是否具有属性列表中的属性,如果找到将其分配给变量 - 动态
- c++ - 如何修改 QJsonObject
- swift - 如何将应用程序的安装限制在 iPhone X 上?
- javascript - 如何使用带有单个道具的括号修复更漂亮和 tslint 错误?
- c# - 在本地 IIS windows 10 上托管 ASP CORE 2.1
- python - Keras 中的 EarlyStopping 是否保存了最佳模型?
- php - AngularJS 检索在控制器中的刀片处初始化的数据