CODEWITHSUNDEEP
javascriptjquerycssjquery-uidroppable
Kobius
Kobius

Reputation: 714

jQuery UI Droppable - How to allow only 1 element per drop zone, instead of stacking

My current script: https://jsfiddle.net/uoyp37bj/11/

The issue is that currently it's possible to "stack" droppable elements by dragging them on-top of each other. I'm trying to make it so that only the latest dropped element stays there, and any previous elements are removed.

I originally just "hid" the additional items using CSS, but as I'm using an input box to keep track of which items exist in the drop zones, this is no longer possible. Any help would be really appreciated, hoping it's something relatively simple within the jQuery UI API, but currently nothing has worked for me.

$(".social-msl-link-label").draggable({
  connectToSortable: ".social-msl-group-list",
  revert: "invalid",
  helper: "clone"
});

var orderMSLids = [];
var droppableOptions = {
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    orderMSLids = [];
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);

    orderMSLids.push($(this).find('.social-msl-link-label').attr('id'));

    $(this).siblings().filter(function() {
      return $(this).text().trim() === $(ui.draggable).text().trim();
    }).empty();

    str = [];
    $(".social-msl-links-order li").each(function(index) {
      var res = $(this).children().attr('id');
      if (res) {
        str.push(res);
      }
    });

    var string = str.join(",");
    $('#msl-order').val(string);


  }
};

$(".social-msl-links-order li.social-msl-drop").droppable(droppableOptions);

$('.social-msl-add').click(function() {
  var $droppable = $('<li class="social-msl-drop"></li>').droppable(droppableOptions);
  $droppable.insertBefore('.social-msl-add');
});

$('#msl-order').prop('value').split(',').forEach(function(id) {
  var $droppable = $('.social-msl-drop.ui-droppable:empty').first();
  if (id) {
    $('.draggable #' + id).clone(true).appendTo($droppable);
  }
});

Just had a thought, but haven't progressed - may be possible to iterate over all of the elements inside the "drop" call, and remove any duplicates. Within this loop, could also check if any drop zones have 2 elements and remove all except 1. Not sure how to script that, but the initial logic makes sense to me.

Upvotes: 0

Views: 924

Answers (1)

T J
T J

Reputation: 43156

Instead of appending the draggable to droppable, just replace it's entire content with the draggable like this:

$(this).html(ui.draggable.clone(true).css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}));

Instead of:

 $(ui.draggable).clone(true).detach().css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}).appendTo(this);

Upvotes: 1

Related Questions