Drag and Drop not working when there are no elements present

Question

I am doing drag and drop between two containers , its working fine when there is at least one element present in the container. But when I drop all elements in either of them and try to drop them back, it's not working.

HTML:-

<div class="portlet-body ui-sortable" id="sortable_portlets">
   <div class="sortable row-fluid pull-left packlistWrap excersissestoaddtopac">First DIV
      <div class="portlet portlet-sortable light bordered packlistupdate packlist" tag-id="2" video-id="4">
         <div class="portlet-title">
            <div class="row">
               <div class="col-md-6"><span>TAG A</span></div>
               <div class="col-md-6"><span></span></div>
            </div>
         </div>
      </div>
   </div>


<hr>
<hr>
<hr>
<hr>

   <div class="mid-title"><span class="caption-subject font-green sbold uppercase ">SECOND DIV</span></div>
   <div id="excersisesinpac">
      <div class="portlet portlet-sortable light bordered packlist" video-id="2">
         <div class="portlet-title">
            <div class="row">
               <div class="col-md-6"><span>TAG B</span></div>
               <div class="col-md-6"><span></span></div>
            </div>
         </div>
      </div>


        <div class="portlet portlet-sortable light bordered packlistupdate packlist" tag-id="2" video-id="4">
         <div class="portlet-title">
            <div class="row">
               <div class="col-md-6"><span>TAG A</span></div>
               <div class="col-md-6"><span></span></div>
            </div>
         </div>
      </div>

   </div>
</div>

javaScript:-

var PortletDraggable = function () {

    return {
        //main function to initiate the module
        init: function () {

            if (!jQuery().sortable) {
                return;
            }

            $("#sortable_portlets").sortable({
                connectWith: ".portlet",
                items: ".portlet", 
                opacity: 0.8,
                handle : '.portlet-title',
                coneHelperSize: true,
                placeholder: 'portlet-sortable-placeholder',
                forcePlaceholderSize: true,
                tolerance: "pointer",
                helper: "clone",
                tolerance: "pointer",
                forcePlaceholderSize: !0,
                helper: "clone",
                cancel: ".portlet-sortable-empty, .portlet-fullscreen", // cancel dragging if portlet is in fullscreen mode
                revert: 250, // animation in milliseconds
                update: function(b, c) {
                    if (c.item.prev().hasClass("portlet-sortable-empty")) {
                        c.item.prev().before(c.item);
                    }   
                },


                stop: function(event, ui) {
                                }
            });
        }
    };
}();

jQuery(document).ready(function() {
    PortletDraggable.init();
});

https://jsfiddle.net/33keyjxx/26/

Answer 1

inside sortable() method use

dropOnEmpty: true,

$(".draggable").draggable({
            revert: "invalid",
            zIndex: 100,
            opacity: 0.35,
            containment: "window",
            scroll: false,
            dropOnEmpty: true,
            stop: function (event, ui) {
                // cancelFollow = true;
                $(event.toElement).one('click', function (e) {
                    e.stopImmediatePropagation();
                });
            }

        });