當沒有元素存在時，拖放不起作用

Question

我正在兩個容器之間進行拖放，當容器中至少存在一個元素時，它工作正常。 但是當我將所有元素放入其中一個並嘗試將它們放回時，它不起作用。

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>

腳本：-

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

內部 sortable() 方法使用

dropOnEmpty: 真,

$(".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();
                });
            }

        });

Answer 2

您可以按如下方式更改代碼。 你會得到你想要的結果。 我剛剛添加了 2 個類類型選擇器.packlistWrap和.mid-title 。 我也改變了connectWith 。

$("#sortable_portlets") => $(".packlistWrap, .mid-title, #sortable_portlets")

connectWith: ".packlistWrap, .mid-title",

其他代碼相同。

$(".packlistWrap, .mid-title, #sortable_portlets").sortable({
  connectWith: ".packlistWrap, .mid-title, .portlet",
  dropOnEmpty: true,
  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) {}
});

Answer 3

在您的代碼中$("#sortable_portlets").sortable(...)是針對單個元素。 您需要針對兩個單獨的可排序容器，在您的情況下是#excersisesinpac和.excersissestoaddtopac 。 在下面的示例中，請注意我已將sortable類添加到#exercisesinpac （因為您已經在.excersissestoaddtopac元素上擁有.excersissestoaddtopac ）。 然后我修改了對$.sortable的調用，使其以.sortable類$("#sortable_portlets .sortable").sortable(...)為目標的兩個元素。

 var PortletDraggable = function() { return { //main function to initiate the module init: function() { if (!jQuery().sortable) { return; } $("#sortable_portlets .sortable").sortable({ connectWith: ".sortable", 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(); });

 body { padding: 1.25em; } div { position: relative; } .wire { position: relative; margin: 1.25em; padding: 1.25em; border: 1px solid; } .wire::before { padding: 0 1em; } .wire::before { position: absolute; top: -1.25em; left: 0; padding: 0 1em; color: white; } #sortable_portlets::before { content: "#sortable_portlets"; background-color: #B683C3; } .sortable::before { content: ".sortable"; background-color: #6373B6; } .portlet { min-width: 100px; } .portlet::before { content: ".portlet"; background-color: #E06D10; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <div class="portlet-body ui-sortable wire" id="sortable_portlets"> <div class="sortable row-fluid packlistWrap excersissestoaddtopac wire"> <div class="portlet portlet-sortable light bordered packlistupdate packlist wire" 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 id="excersisesinpac" class="sortable wire"> <div class="portlet portlet-sortable light bordered packlist wire" 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 wire" 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>