Jquery 未在dragStart事件中设置数据传输对象
我正在尝试实现拖放来更改文章调度系统中的日期。我希望用户能够将文章条目从一个日期拖到另一个日期，然后日程安排应该自动更新。这是我的密码：Jquery 未在dragStart事件中设置数据传输对象,jquery,drag-and-drop,jquery-ui-draggable,data-transfer,Jquery,Drag And Drop,Jquery Ui Draggable,Data Transfer,我正在尝试实现拖放来更改文章调度系统中的日期。我希望用户能够将文章条目从一个日期拖到另一个日期，然后日程安排应该自动更新。这是我的密码： <script type="text/javascript"> $(function () { $(".scheduledArticleRow").draggable({ cursor: "move", cursorAt: { top: -12, left: -20 },
<script type="text/javascript">
$(function () {
$(".scheduledArticleRow").draggable({
cursor: "move",
cursorAt: { top: -12, left: -20 },
opacity: 0.5,
helper: function (event) {
return $("<div class='ui-widget-header'>" + $(this).data('title') + "</div>")
}
});
$(".articleNeededRow").droppable();
$(".reservedDateRow").droppable();
$(".scheduledArticleRow").off("dragstart").on("dragstart", function (e) {
console.log("dragstart");
e.dataTransfer.setData("articleId", $(this).data("articleId")); // Uncaught TypeError: Cannot call method 'setData' of undefined
e.dataTransfer.setData("oldDate", $(this).data("date")); // Uncaught TypeError: Cannot call method 'setData' of undefined
e.originalEvent.dataTransfer.setData("articleId", $(this).data("articleId")); // Uncaught TypeError: Cannot call method 'setData' of undefined
e.originalEvent.dataTransfer.setData("oldDate", $(this).data("date")); // Uncaught TypeError: Cannot call method 'setData' of undefined
});
$(".articleNeededRow").off("drop").on('drop', function (e) {
console.log("drop");
e.preventDefault();
e.stopPropagation();
changeScheduledDate(e);
});
$(".reservedDateRow").off("drop").on('drop', function (e) {
console.log("drop");
e.preventDefault();
e.stopPropagation();
changeScheduledDate(e);
});
});
function changeScheduledDate(e) {
debugger;
var articleId = e.dataTransfer.getData("articleId"); // Uncaught TypeError: Cannot call method 'setData' of undefined
var oldDate = e.dataTransfer.getData("oldDate"); // Uncaught TypeError: Cannot call method 'setData' of undefined
articleId = e.originalEvent.dataTransfer.getData("articleId", $(this).data("articleId")); // Uncaught TypeError: Cannot call method 'setData' of undefined
oldDate = e.originalEvent.dataTransfer.getData("oldDate", $(this).data("date")); // Uncaught TypeError: Cannot call method 'setData' of undefined
var newDate = $(this).parents(".tr").data("date");
// Do date-change stuff
}
</script>
<div class="table tidytable" width="90%">
<div class="thead">
<div class="cell">Date</div>
<div class="cell">Article title</div>
</div>
<div class="tbody" id="scheduleBody">
<div class="tr articleNeededRow" data-date="2014-02-11">
<div class="cell"><strong>Tue, 11th Feb</strong></div>
<div class="cell articleNeeded">Article needed.</div>
</div>
<div class="tr articleNeededRow" data-date="2014-02-12">
<div class="cell"><strong>Wed, 12th Feb</strong></div>
<div class="cell articleNeeded">Article needed.</div>
</div>
<div class="tr reservedDateRow" data-date="2014-02-13">
<div class="cell"><strong>Thu, 13th Feb</strong></div>
<div class="cell articleNeeded"><strong>Reserved for an upcoming article.</strong></div>
</div>
<div class="tr scheduledArticleRow" data-date="2014-02-14" data-articleid="8789" data-title="This is the title"
draggable="true">
<div class="cell"><strong>Fri, 14th Feb</strong></div>
<div class="cell">
<h3>This is the title</h3>
</div>
</div>
</div>
</div>
$（函数（）{
$（“.scheduledArticleRow”）.draggable({
光标：“移动”，
光标：{顶部：-12，左侧：-20}，
不透明度：0.5，
助手：函数（事件）{
返回$（“”+$（this.data（'title'）+“”）
}
});
$（“.articleNeededRow”）.Dropable（）；
$（“.ReservedDataRow”）.Dropable（）；
$（“.scheduledArticleRow”）.off（“dragstart”）.on（“dragstart”，函数（e）{
console.log（“dragstart”）；
e、 dataTransfer.setData（“articleId”，$（this.data（“articleId”）；//未捕获类型错误：无法调用未定义的方法“setData”
e、 dataTransfer.setData（“oldDate”，“this.data”（“date”）；//未捕获类型错误：无法调用未定义的方法“setData”
e、 originalEvent.dataTransfer.setData（“articleId”，$（this.data（“articleId”）；//未捕获类型错误：无法调用未定义的
e、 OriginaleEvent.dataTransfer.setData（“oldDate”，$（this.data（“date”））；//未捕获类型错误：无法调用未定义的
});
$（“.articleeneedrow”）.off（“drop”）.on（“drop”，函数（e）{
控制台日志（“下降”）；
e、 预防默认值（）；
e、 停止传播（）；
变更时间表（e）；
});
$（“.reservedDateRow”）.off（“drop”）.on（“drop”，函数（e）{
控制台日志（“下降”）；
e、 预防默认值（）；
e、 停止传播（）；
变更时间表（e）；
});
});
函数更改时间表日期（e）{
调试器；
var articleId=e.dataTransfer.getData（“articleId”）；//未捕获类型错误：无法调用未定义的方法“setData”
var oldDate=e.dataTransfer.getData（“oldDate”）；//未捕获类型错误：无法调用未定义的方法“setData”
articleId=e.OriginaleEvent.dataTransfer.getData（“articleId”，$（this.data（“articleId”）；//未捕获类型错误：无法调用未定义的
oldDate=e.OriginaleEvent.dataTransfer.getData（“oldDate”，$（this.data（“date”）；//未捕获类型错误：无法调用未定义的
var newDate=$（this）.parents（.tr”）.data（“日期”）；
//日期会改变吗
}
日期
文章标题
2月11日星期二
文章需要。
2月12日星期三
文章需要。
2月13日星期四
为即将发表的文章保留。
2月14日星期五
这是标题
我正在使用一个.css表。用户应该能够从“This is The title”行中的任意位置拖动到其他任何行。但是在dragStart事件处理程序中，e.dataTransfer被设置为null，并且不可能将任何数据传递给drop事件。我不想求助于cookie、HTML5本地存储或全局变量——这件事应该就行了。我使用数据传输将其拖放到应用程序的其他部分，效果良好。一些帖子建议我需要使用e.originalEvent.dataTransfer，但这也是空的。顺便说一句，我正在使用Google Chrome。我创建了一个JSFIDLE，非常感谢您的帮助。您的.draggable（）似乎做错了什么。您还需要在dragover中执行
e.preventDefault（）e.stopPropagation（） $(function () {
/*
$(".scheduledArticleRow").draggable({
cursor: "move",
cursorAt: {
top: -12,
left: -20
},
opacity: 0.5,
helper: function (event) {
return $("<div class='ui-widget-header'>" + $(this).data('title') + "</div>")
}
});
*/
$(".articleNeededRow").droppable(); // With this commented out the code still works
$(".reservedDateRow").droppable(); // This one too
$(".scheduledArticleRow").on("dragstart", function (e) {
console.log("dragstart");
console.dir(e);
e.originalEvent.dataTransfer.setData("articleId", $(this).data("articleId"))
e.originalEvent.dataTransfer.setData("oldDate", $(this).data("date"));
});
$(".articleNeededRow").on('dragover', function (e) {
console.log("dragover");
e.preventDefault();
e.stopPropagation();
});
$(".articleNeededRow").on('drop', function (e) {
console.log("drop");
e.preventDefault();
e.stopPropagation();
changeScheduledDate(e);
});
$(".reservedDateRow").on('dragover', function (e) {
console.log("dragover");
e.preventDefault();
e.stopPropagation();
});
$(".reservedDateRow").on('drop', function (e) {
console.log("drop");
e.preventDefault();
e.stopPropagation();
changeScheduledDate(e);
});
});
function changeScheduledDate(e) {
articleId = e.originalEvent.dataTransfer.getData("articleId");
oldDate = e.originalEvent.dataTransfer.getData("oldDate");
console.log("articleID: "+articleId);
console.log("oldDate: "+oldDate);
var newDate = $(this).parents(".tr").data("date");
console.log("newDate: "+newDate);
// Do date-change stuff
}
$（函数（）{
/*
$（“.scheduledArticleRow”）.draggable({
光标：“移动”，
库索拉特：{
前-12名，
左：-20
},
不透明度：0.5，
助手：函数（事件）{
返回$（“”+$（this.data（'title'）+“”）
}
});
*/
$（“.articleNeededRow”）.droppable（）；//注释掉此项后，代码仍然有效
$（“.ReservedDataRow”）.droppable（）；//这个也是
$（.scheduledArticleRow”）。在（“dragstart”，函数（e）上{
console.log（“dragstart”）；
署长（e）；
e、 OriginaleEvent.dataTransfer.setData（“articleId”，美元）（this.data（“articleId”））
e、 OriginaleEvent.dataTransfer.setData（“oldDate”，$（this.data（“date”））；
});
$（“.articleNeededRow”）。关于（'dragover'，函数（e）{
控制台日志（“dragover”）；
e、 预防默认值（）；
e、 停止传播（）；
});
$（“.articleNeededRow”）。关于（'drop'，函数（e）{
控制台日志（“下降”）；
e、 预防默认值（）；
e、 停止传播（）；
变更时间表（e）；
});
$（“.reservedDateRow”）.on（'dragover'，函数（e）{
控制台日志（“dragover”）；
e、 预防默认值（）；
e、 停止传播（）；
});
$（“.reservedDateRow”）。在（'drop'，函数（e）上{
控制台日志（“下降”）；
e、 预防默认值（）；
e、 停止传播（）；
变更时间表（e）；
});
});
函数更改时间表日期（e）{
articleId=e.originalEvent.dataTransfer.getData（“articleId”）；
oldDate=e.originalEvent.dataTransfer.getData（“oldDate”）；
日志（“articleID:+articleID”）；
console.log（“oldDate:+oldDate”）；
var newDate=$（this）.parents（.tr”）.data（“日期”）；
console.log（“newDate:+newDate”）；
//日期会改变吗
}