1

I am using jQuery UI Droppable...

I need a same functionality like Drag and Drop for clicking on star icon from Draggable, it has to add to the Droppable container. Which I tried successfully.

But, When I am trying to remove <li> element from the Droppable container, the same trick (clone) is not working... here.. on Clicking on Close icon it should only close relevant <li> from the draggable area.

Any quick suggestions please?

Is it possible to:

  • Clone (clicking on Star icon) restrict to only once... while it is creating multiple <li> s for multiple clicks.

FIDDLE

Screenshots for Reference

For Reference

HTML

<div class="mn-items">
  <h2>Drag</h2>
  <div id="catalog">
      <ul class="rp-draggable">
        <li class="one">Item 1 <i class="fa fa-star-o"></i></li>
        <li class="two">Item 2 <i class="fa fa-star-o"></i></li>
        <li class="three">Item 3 <i class="fa fa-star-o"></i></li>
        <li class="four">Item 4 <i class="fa fa-star-o"></i></li>
        <li class="five">Item 5 <i class="fa fa-star-o"></i></li>
        <li class="six">Item 6 <i class="fa fa-star-o"></i></li>
      </ul>
  </div>
</div>

<div class="header-favorites">
  <h2>Drop Here...</h2>
    <ul class="h-droped-list">
      <li class="placeholder">Add your items here</li>
    </ul>
</div>

jQuery

$(document).ready(function(){

    /* jQuery Droppable */
    $(function() {
        $( ".mn-items .rp-draggable li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( ".header-favorites ul" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $(ui.draggable).clone().appendTo(this);
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });


    /* Click Star Icon to Add to Drop Here Container */
    $('ul.rp-draggable li .fa-star-o').click(function(){
        $(this).closest('li').clone().appendTo('.h-droped-list');
        $(this).closest('li').toggleClass('addedToFav');
    });

    /* Click Close Icon to Remove from Drop Here Container */
    $("ul.h-droped-list li .fa-star-o").click(function(){
        $(this).closest('li').remove();
    });

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

2 Answers2

0

Remove button lis are added dynamically, You need to use event delegation for attaching events to them:

$("ul.h-droped-list").on('click','li .fa-star-o',function(){
    $(this).closest('li').remove();
});

Working Demo

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • Thanks for the quick reply.... Its working like a **CHAMP**.. but it is not taking out the CSS class `addedToFav` from the Drag Container though... – Reddy Apr 24 '15 at 11:23
  • You need to maintain some attribute or class that will be used to target the drag container elements when respective new elements are removed. – Milind Anantwar Apr 24 '15 at 11:25
  • **Tried and failed** :( .... I may be having 100's of menu items. in that case, how can I handle the same? Please help me out with Fiddle... as I am not good at jQuery ecept copy paste :) – Reddy Apr 24 '15 at 11:29
  • first of all associate something(like class or attribute ) when you clone. – Milind Anantwar Apr 24 '15 at 11:54
0

thing is that you need to delegate click event to its parent for dyanamically added element

 /* Click Close Icon to Remove from Drop Here Container */
$('.header-favorites').on('click',"ul.h-droped-list li .fa-star-o",function(){
   $(this).closest('li').remove();
});

demo

bipen
  • 36,319
  • 9
  • 49
  • 62