jQuery - Droppable area should not allow duplicates and count the dropped <li> elements

Question

I am using jQuery Droppable UI.

How can I stop dropping the same element in the targetted area.

---

Fiddle

---

Scenario:

I have menu items which I can drop the the same either Add to Favs div or Quick Links div or to Both divs to create a shortcut. But in below case, how can I stop the already dropped element duplication.

HTML

<ul id="menulinks">
  <li>Menu Link 1</li>
  <li>Menu Link 2</li>
  <li>Menu Link 3</li>
  <li>Menu Link 4</li>
</ul>

<div class="addtofavs">
    <h4>Add to Favourites <span id="atf-count"></span></h4>
    <ul class="container">
    </ul>
</div>

<div class="addtoquicklinks">
    <h4>Add to Quicklinks <span id="atq-count"></span></h4>
    <ul class="container">
    </ul>
</div>

CSS

body{font-family:verdana;font-size:12px;}
ul{list-style-type:none;margin:0;padding:0; margin-bottom:10px;}
li{margin:5px;padding:5px;width:150px;border:1px solid #ddd;background:#fff;cursor:pointer;}
.container {position:relative;float:left;width:170px;border:1px solid #ff0000;margin-right:10px; min-height:100px; }
#memulinks{clear:both;display:block;}
.addtofavs,.addtoquicklinks{float:left;width:250px;}
.addtofavs ul{background:#fef;border:1px solid #ddd;}
.addtoquicklinks ul{background:#efefef;border:1px solid #ccc;}
.addtofavs ul li,.addtoquicklinks ul li{border-color:#222;}
h4{margin:20px 0 0 0;font-size:14px;}
h4 span{font-weight:normal;font-size:12px;}
.ui-state-highlight{background:#000;height:1px;padding:0;border:none;}

jQuery

$(function() {
    var x = $( ".addtofavs li" ).length;
    var y = $( ".addtoquicklinks li" ).length;
    $( "#atf-count" ).text(x);
    $( "#atq-count" ).text(y);

    $("#menulinks li").draggable({
      connectToSortable: '.container',
      helper: 'clone',
      revertDuration: 0
    });

    $(".container").sortable({
        connectWith: '.container',
        placeholder: "ui-state-highlight",
      revert: true
    });

    $(".container li").draggable({
      connectToSortable: '.container',
        placeholder: "ui-state-highlight",
      revert: true,
    });


    $("ul, li").disableSelection();

});

Answer 1

This could help you:

Assign a data-attribute to the origin list for refernce:

 $("#menulinks li").draggable({
    connectToSortable: '.container',
    helper: 'clone',
    revertDuration: 0,
    create: function () {
        var eq = $(this).index();
        $(this).attr('data-index', eq);
    }
});

Check if this element already exist when the container-div receives a new element, if so, remove the last added element:

 $(".container").sortable({
    connectWith: '.container',
    placeholder: "ui-state-highlight",
    receive: function (event, ui) {
        var uiIndex = ui.item.attr('data-index');
        var item =  $(this).find('[data-index=' + uiIndex + ']');
        if (item.length > 1) {
          item.last().remove();
        }
    },
    revert: true
});

Demo

Side-note: The reference to the newly added item in the receive-function could've been easier but there is a known bug coping with the issue:

http://bugs.jqueryui.com/ticket/4303

Reference

.draggable() - create

.sortable() - receive