jQuery Drag and Droppable - Hide placeholder if droppable area has li elements

Question

I am using jQuery Droppable Plugin.

I want to hide a placeholder if Dropped <ul> has one or more elements. It is working fine for Drag n Drop functionality. On top of it, I also implemented click method. It will also clone the <li> element by clicing on star icon from Dragged container. But in this method, I am unable to hide the placeholder.

FIDDLE

Please check the Code below:::

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">Placeholder (hides if it has items)</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").on('click','li .fa-star-o',function(){
        $(this).closest('li').remove();
    });

    /* Hide Placeholder if it has Items, Show if it is empty */
    if($(".header-favorites ul li:not(.placeholder)").length > 0) {
        $(".header-favorites ul li.placeholder").hide();
    }else{
        $(".header-favorites ul li.placeholder").show();
    }


});

score 1 · Accepted Answer · answered Apr 30 '15 at 08:50

I'll give you a link to Fiddle. I made some updates that might help you but you still have some work to do. I will help you later, if you need that.

js

$(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" ).hide();
            $(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(){
    var $target = $(this).closest("li"),
        $dropedList = $(".h-droped-list");

    if(!$target.hasClass("addedToFav")){
        $target
          .addClass("addedToFav")
          .clone()
          .appendTo($dropedList);

        $dropedList
         .find(".placeholder")
         .hide();
    }else{
        //do what you want
    }

});

/* Click Close Icon to Remove from Drop Here Container */
$("ul.h-droped-list").on('click','li .fa-star-o',function(){
    var $target = $(this).closest("li"),
        $dropList = $target.parent("ul");

    $target.remove();



    if($dropList.children().length == 1){
        var $lastItem = $($dropList.children()[0]);
        $lastItem.hasClass("placeholder") && $lastItem.show();
    }

});

/* Hide Placeholder if it has Items or Show if it is empty */
if($(".header-favorites ul li:not(.placeholder)").length > 0) {
    $(".header-favorites ul li.placeholder").hide();
}else{
    $(".header-favorites ul li.placeholder").show();
}

});

Thank you @Forin... This really helped me... but how can I remove a `addedToFav` css class from Draggable container by deleting the same element from Droppable container... — Reddy, Apr 30 '15 at 09:55
Excellent @Florin.. This is what exactly I want.... Thanks for your effort and I have upvoted your answer and accepted... Thanks a TON.... One more small help please, I want also same functionality (remove the relevant element from Drop Container), when I click on Favorites link from Drag Containter... Actally its like Toggle on Click star icon from Drag container — Reddy, May 04 '15 at 02:52
Ok. Now you can remove an item when you perform a click on the star icon. Also, when you drop an item, he will be "addedToFav" to be consistent. [Fiddle](http://jsfiddle.net/fadrian9006/0m38jj5n/6/) — Spawn, May 04 '15 at 15:13
Awesome @Florin, I never expected better than this... Thank you so much.. You are the BEST :) — Reddy, May 05 '15 at 05:36

jQuery Drag and Droppable - Hide placeholder if droppable area has li elements

Please check the Code below:::

1 Answers1