Good evening everyone. Still working on my DnD project, the DnD works satisfactorily but all the items stay draggable once they have been dropped. I would like to remove the draggable attribute once it has been dropped. How do I manage that? I have googled for severel hours before BTW. TIA Code follows...
$(function() {
$(".tier").draggable({
cursor: "grab",
revert: true
});
$(".target.droppable").droppable({
accept: ".tier",
tolerance: "pointer",
drop: function(event, ui) {
ui.draggable.attr("style", "margin: 0; border: 0;").appendTo(this);
ui.draggable.attr("draggable", false);
n = ui.draggable.attr("src");
dr = ui.draggable.attr("draggable");
console.log("Draggable:" + dr);
// console.log("Image Filename:" + n);
tn = n.substr(4, 1);
// console.log("Tiernummer:" + tn);
x = (this).cellIndex;
// console.log("Dropped Index:" + x);
index = $(this).closest("tr").index();
console.log("Dropped tr:" + index);
t = parseInt(tn, 10);
(this).setAttribute("draggable", false);
checkright(t, x);
}
});
});
It's a class, so just remove the class like ui.draggable.removeClass('draggable').removeClass('tier');
$(".target.droppable").droppable({
accept: ".tier",
tolerance: "pointer",
drop: function(event, ui) {
ui.draggable.attr("style", "margin: 0; border: 0;").appendTo(this);
ui.draggable.removeClass('draggable').removeClass('tier');
ui.draggable.attr("draggable", false);
n = ui.draggable.attr("src");
dr = ui.draggable.attr("draggable");
console.log("Draggable:" + dr);
// console.log("Image Filename:" + n);
tn = n.substr(4, 1);
// console.log("Tiernummer:" + tn);
x = (this).cellIndex;
// console.log("Dropped Index:" + x);
index = $(this).closest("tr").index();
console.log("Dropped tr:" + index);
t = parseInt(tn, 10);
(this).setAttribute("draggable", false);
checkright(t, x);
}
});