It seems that your .draggable() is doing something wrong. You also need to do e.preventDefault()
and e.stopPropagation()
in dragover to make sure drop occurs.
This code gets to all the events correctly:
$(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
}