Как добавить элемент обратно в исходный контейнер после его перетаскивания в Jquery Sortable? - PullRequest
Новая
       29

Как добавить элемент обратно в исходный контейнер после его перетаскивания в Jquery Sortable?

0 голосов
/ 22 июня 2019

У меня есть драже и предмет, сделанный из jquery-sortable . Здесь с двумя подключенными контейнерами я бы хотел бесконечно перетаскивать элемент из левого контейнера, чтобы создать элемент в правом контейнере несколько раз.

Ниже приведен мой сценарий, демонстрирующий, что 

$(document).ready(function() {
  function Menu_init() {
    // Uncomment below to disable item to drag back to left container
    // $('#myUL').sortable({
    // 	group: 'nested',
    // 	drop: false
    // })

    var oldContainer;
    $("ol.example").sortable({
      group: 'nested',
      exclude: '.unsortable', // exclude module description from being drage droped
      afterMove: function(placeholder, container) {
        if (oldContainer != container) {
          if (oldContainer)
            oldContainer.el.removeClass("active");
          container.el.addClass("active");

          oldContainer = container;
          // alert('hello');
        }
      },
      onDrop: function($item, container, _super) {
        container.el.removeClass("active");
        _super($item, container);
        li = $item;
        containerID = container.target[0].id;
        if (containerID !== 'myUL') {
          // Code Here
          item = li.clone();
          $('#myUL').append(item);
          // Code Here
          li.children('a').css({
            'visibility': 'visible'
          });
          // } 
        }
      }

    });

    // init filter
    // itemFilter("myInput","myUL");
  }

  $(function() {
    Menu_init();
  })
})
div#icon-picker {
  margin-top: 20px;
  height: 300px !important;
  width: 330px !important;
  overflow: scroll;
}

div#icon-picker i {
  display: inline-block;
  padding: 5px;
}

div#icon-picker i:hover {
  background: #ccc;
  cursor: pointer;
}

body.dragging,
body.dragging *,
.dragged {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
  padding-left: 0 !important;
}

ol.forms li,
ol.example2 li {
  display: block;
  margin: 10px 5px;
  padding: 11px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
}

ol.example li a,
ol.example2 i {
  font-size: 15px !important;
}

ol.form li>a,
ol.example2 li>a {
  line-height: 0px;
  margin-top: 15px;
  font-size: 16px padding: 15px;
}

ol.example2 li:last-child {
  margin-bottom: 10px;
}

li:hover {
  cursor: grab !important;
  cursor: -webkit-grab !important;
}

li>i {
  padding: 4px 7px !important;
}

ol ol {
  background: #eeeeee;
}

.dragged {
  opacity: 0.5;
}

ol.example li.placeholder {
  position: relative;
  border: 3px dashed red;
  opacity: 0.5;
}

ol.example li.placeholder:before {
  /*position: absolute;*/
  /* Define arrowhead*/
}

ol.example {
  border: 1px solid #ccc;
}

.popover {
  height: 400px;
  overflow-y: scroll;
}

li>i {
  padding: 15px;
  cursor: pointer;
}

li .popover {
  cursor: pointer;
}

li .popover i {
  padding: 10px;
}

li .popover i:hover {
  background: #CCC;
}

i.move_right {
  visibility: hidden;
}

ol.forms li:hover>i.move_right {
  visibility: visible;
  animation-name: move-right;
  animation-delay: 0s;
  animation-duration: 1s;
  /*animation-iteration-count: infinite;*/
  /*animation-dir*/
}

.opts {
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: 1000000000;
  list-style-type: none;
  /*background: #FFF;*/
}

button.saveChange {
  position: absolute;
  z-index: 1000000000;
  top: 44px;
}

.opts li {
  padding: 15px;
  background: rgba(0, 0, 0, .8);
}

.bckg {
  background: rgba(0, 0, 0, .6);
}

ol.example2>li[data-act='N'] {
  text-decoration: underline;
}


/* search box inside select2*/

input.select2-input {
  margin: 12px 0 8px 0 !important;
}

div[id^="target"]:not(#target1) {
  display: none;
}


/* here to set height and auto scroll for both container*/

ol#myUL,
ol.example {
  height: 600px !important;
  overflow: scroll;
}


/*div.newMenu{ border: 1 solid black; }*/

ol.example2>li:last-child {
  margin-bottom: 30px;
}

div.iconPopover {
  top: 0px !important;
}

.modal {
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Block Sortable Container -->
<div class="row">
  <form class="form-horizontal">
    <session id="MenuList">
      <div class="container">
        <dir class="row">
          <!-- Left Container -->
          <div class="col-xs-6">
            <h4 class="center">List Available Menu</h4>
            <ol class="example forms" id="myUL">
              <li>
                <i class=""></i>Customer
                <a href="JavaScript:void(0)" style="visibility: hidden;">
                  <i class="fa fa-pencil"></i>
                </a>
                <ol>
                </ol>
              </li>
            </ol>
          </div>
          <!-- Right Container -->
          <div class="col-xs-6">
            <h4 class="center">List Available Menu</h4>
            <div class="newMenu">
              <ol class="example example2 sortable">

              </ol>
            </div>
          </div>
        </dir>
      </div>
    </session>
  </form>
</div>
<!-- End Block Sortable Container -->

Сверху, чтобы сохранить предмет в левом контейнере, я клонировал его и добавляю обратно в левый контейнер.

Однако проблема в том, что я не хочу, чтобы он перетаскивался обратно в левый контейнер (ID #myUL), поэтому я отключаю функцию удаления для левого контейнера с помощью этого сценария: 

     $('#myUL').sortable({
        group: 'nested',
        drop: false
     })

Как вы также можете найти в приведенном выше фрагменте кода. Только после этого перетаскиваемый элемент никогда не сможет вернуться обратно в левый контейнер, как я ранее хотел.

Следовательно, как я могу сохранить товар в левом контейнере и не допустить его перетаскивания назад? Спасибо

...