CODEWITHSUNDEEP
jquerycssdrag-and-dropjquery-ui-sortable
Brent
Brent

Reputation: 67

Jquery Drag and Drop over sortable list

UPDATE: For anyone seeking this sort of answer....the answer below was correct. I have updated the jsfiddle with the corrected code.

I have a jquery drag and drop list created. Basically I can drag and drop "Fieldsets" in to a div. Then I can reorder/sort those fieldsets. I want to be able to drag and drop a "field" into the Fieldsets which are already in the sortable div. The fields have to be dropped into the fieldset and not the sortable list of fieldsets (this holding the place of a fieldset.

Right now everything is working except the Field will not append into the fieldset. First I drag Fieldset 1 into the sortable div to the right. Then I drag a the tile titled "Field One" into the Fieldset 1 below the line "Drop fields here!". But the field will not append to that fieldset.

Can someone show me what I am doing wrong?

JSFIDDLE

  $(document).ready(function() {
  $("#drop-area").droppable({

    accept: '.ui-draggable:not(.draggableField)',
    drop: function(event, ui) {
      var clone = $(ui.draggable).clone()
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');
      if (clone.hasClass('dropped')) {
            return false;
        }
        clone.addClass('.connectedSortable').addClass('dropped');

      $(this).append(clone);

    }
  });

    $(".fieldDroppable").droppable({
    // accept: '.draggableField:not(.ui-draggable)',
    drop: function(event, ui) {
      var clone = $(ui.draggable).clone()
      $(this).append(clone);
    }
  });

  $(".ui-draggable").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });
    $(".draggableField").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });

  $("#drop-area").sortable();
  $("#drop-area").disableSelection();

});

Upvotes: 2

Views: 601

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7103

Updated code for $("#drop-area"):

$("#drop-area").droppable({
    accept: '.ui-draggable:not(.draggableField)',
    drop: function(event, ui) {
      var clone = $(ui.draggable).clone()
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');
      if (clone.hasClass('dropped')) {
            return false;
        }
        clone.addClass('.connectedSortable').addClass('dropped');

      $(this).append(clone);

      var fieldsDroppable = $('#drop-area .ui-draggable:last-child .fieldDroppable');

      fieldsDroppable.droppable({
        drop: function(event, ui) {
          var clone = $(ui.draggable).clone()
          $(this).append(clone);
        }
      });
    }
  });

I have added this part:

var fieldsDroppable = $('#drop-area .ui-draggable:last-child .fieldDroppable');
fieldsDroppable.droppable({
    drop: function(event, ui) {
        var clone = $(ui.draggable).clone();
        $(this).append(clone);
    }
});

The reason why it didn't work earlier because after you add droppable element into that black area, you don't re-register jQuery event for dropped element (fieldset + fields) and because of this, it doesn't allow to drop "fields" into it.

Upvotes: 3

Related Questions