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

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



});
});

CodePudding user response：

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

CodePudding user response：

Consider the following.

$(function() {
  $(".tier").draggable({
    cursor: "grab",
    revert: true
  });

  $(".target.droppable").droppable({
    accept: ".tier",
    tolerance: "pointer",
    drop: function(event, ui) {
      var dropped = ui.draggable.attr("style", "margin: 0; border: 0;").appendTo(this);
      dropped.draggable("destroy");
      n = dropped.attr("src");
      dr = dropped.attr("draggable");
      console.log("Draggable:"   dr);
      // console.log("Image Filename:"   n);
      tn = n.substr(4, 1);
      // console.log("Tiernummer:"   tn);
      x = $(this).index();
      // console.log("Dropped Index:"   x);
      index = $(this).closest("tr").index();
      console.log("Dropped tr:"   index);
      t = parseInt(tn, 10);
      $(this).attr("draggable", false);
      checkright(t, x);
    }
  });
});

It is best to use destroy for any jQuery UI object. See More: https://api.jqueryui.com/draggable/#method-destroy

Removes the draggable functionality completely. This will return the element back to its pre-init state.