Перетаскивание не работает, когда отсутствуют элементы

ProgramBox

Перетаскивание не работает, когда отсутствуют элементы

Post author:admin
Запись опубликована:1 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я выполняю перетаскивание между двумя контейнерами, оно работает нормально, когда в контейнере присутствует хотя бы один элемент. Но когда я отбрасываю все элементы в любом из них и пытаюсь отбросить их обратно, это не работает.

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/

1. Пожалуйста, уточните, какое поведение ожидается и что происходит. Также это не css-вопрос, добавьте соответствующие теги к вашему вопросу, а также соответствующий javascript.

2. Это не перетаскивание. Это можно сортировать. Что вы хотите, так это посмотреть на draggable() и droppable() (оба из jQuery-UI)

Ответ №1:

использование метода inside sortable()

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

        });

Ответ №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) {}
});

1. Добро пожаловать в StackOverflow! Пожалуйста, объясните, что вы изменили, чтобы мы могли легко увидеть разницу между вашим ответом и вопросом.

2. Спасибо, Стефан. Я обновил свой ответ. Я надеюсь, что это было понятнее.

Ответ №3:

В вашем коде $("#sortable_portlets").sortable(...) нацелен на один элемент. Вам необходимо настроить таргетинг на два отдельных сортируемых контейнера, которые в вашем случае будут #excersisesinpac и .excersissestoaddtopac . В приведенном ниже примере обратите внимание, что я добавил класс sortable в #exercisesinpac (поскольку у вас уже есть этот класс в .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>