0

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

});
Reddy
  • 1,477
  • 29
  • 79

3 Answers3

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

empiric
  • 7,825
  • 7
  • 37
  • 48
0

You can use $( ".selector" ).draggable( "disable" ); to disable an draggable element (see jquery reference.

To detect the recently dragged item i suggest using the code provided in this answer

drop: function(ev, ui) {
             //to get the id
             //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
             console.dir(ui.draggable)  
}
Community
  • 1
  • 1
malle
  • 3
  • 5
  • Sorry Malle.. still no luck... as I am newbie to to jQuery, if you can provide me the Fiddle.. that will be really helpful... – Reddy Apr 13 '15 at 07:04
0

One solution would be to add values to your draggable list elements like this:

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

Then add the droppable event listener to the containers you wish to drop to:

$(".container").droppable({
    drop: function(event, ui) {
        var val = $(ui.draggable).val();
    }
});

When dropping the element, check if the dropped value is already in the box.

Hope you get the gist of it, I can't make a full example right now but I can update it later if you need some more.

jokarl
  • 1,913
  • 2
  • 24
  • 52
  • Hi Hochas, thnaks for the quick response. Still it is not working :( Please check the Updated Fiddle (http://jsfiddle.net/4Lu43qxs/2/) – Reddy Apr 13 '15 at 07:00
  • I didn't write the full code for you, the logic is up to you. It's just an idea for you to expand on. @empiric has a working example below though! – jokarl Apr 13 '15 at 07:31