Search code examples
jqueryjquery-uidrag-and-drop

How do you remove the "draggable" attribut from an element once it's been dropped?


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);
      }



});
});


Solution

  • 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);
          }
    });