CODEWITHSUNDEEP
jqueryjquery-ui-draggablejquery-ui-droppable
bryanhumps
bryanhumps

Reputation: 43

jquery: make element draggable after dropped without cloning

$(".drag").draggable({
  start: function() {
    $(this).height(150).width(195);
  },
  cursor: "move",
  revert: "invalid",
  appendTo: "body",
  containment: "document",
  helper: "clone",
  distance: 50
});

$(".drop").droppable({
      hoverClass: "hoverDrop",
      tolerance: "pointer",
      drop: function(event, ui) {
          var elem = $(ui.draggable).clone();
          $(this).append(elem);
          $(this).droppable('disable'); //disbles more than one draggable from being dropped
          // console.log(this);
          $(elem).draggable({
            helper: "clone",
            drag: function(event, ui) {
              $(elem).prev().empty();
            }
          });
        } //end of drop function

Hi everyone! I'm doing up a drag and drop where I can drag an activity (td element) and drop it into another td in a different table. After dropping it, I want to be able to drag that element into another td in the same table (like dragging a class schedule around a timetable)

I have managed to "re-drag" that dropped element, but instead of "moving" it to a different td, all I seem to be able to do is to keep cloning the element I am dragging. How can I ensure that when I "re-drag" the element that I initially dropped, it is removed from the initial td it was first dropped, and "moved" to the subsequent td?

Upvotes: 1

Views: 2018

Answers (1)

Yass
Yass

Reputation: 2668

If you want to maintain "draggability", you can append ui.draggable to the new td. That way, you'll still be able to drag the item was dropped, giving you free reign over each item's location.

I've simplified your example somewhat, specifically the drop event. I've also removed some of the options for simplicity and fewer points of failure. You can re-add the options in your project:

$('.drag').draggable({
  cursor: "move",
  revert: true,
  appendTo: "body",
  containment: "document",
  distance: 50
});

$('.drop').droppable({
  hoverClass: "hoverDrop",
  tolerance: "pointer",
  drop: function(event, ui) {
    $(this).find('ul').append(ui.draggable);
  }
});

Fiddle Demo

If you have any questions, please ask.

Upvotes: 2

Related Questions