как сортировать элементы при падении с использованием jquery ui? - PullRequest
Новая
       137

как сортировать элементы при падении с использованием jquery ui?

1 голос
/ 14 июля 2020

У меня очень простой jquery код пользовательского интерфейса для перетаскивания элементов. Однако у меня была проблема: я не могу отсортировать выпавший элемент при падении !!

Я использовал jquery сортируемую функциональность, но я никогда не знаю, в чем проблема !!

У меня есть полный пример кода здесь . И если бы я мог объяснить это по-другому, мне нужно перетащить раздел 1, затем раздел 2 и, наконец, отсортировать раздел 3 между разделами 1 и 2, отбрасывая его. не могли бы вы мне помочь? 

$(function() {
  $("#side").resizable({
    handles: 'e'
  });

  $("#editor").sortable().disableSelection()
    .droppable({
      drop: function(event, ui) {
        $(this)
          .append('<div contenteditable="true" ' +
            'class="alert alert-danger">' +
            $(ui.draggable).html() + '</div>')
          .animate({
            width: "250px"
          }, 700);
      }
    });

  $(".item")
    .mousedown(function() {
      $(this).css('cursor', 'grabbing');
    })
    .draggable({
      helper: "clone"
    });
});
#container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#editor {
  flex: 1;
  margin: 0 auto;
  height: 100vh;
  background-color: DodgerBlue;
  text-align: right;
  padding: 20px;
}

#side {
  min-width: 130px;
  max-width: 260px;
  height: 100vh;
  background: #708090;
  border: 1px solid #696969;
  color: yellow;
}

.item {
  border: 1px solid #DCDCDC;
  border-radius: .4em;
  background-color: white;
  color: #000;
  padding: 12px;
  margin: 10px;
  display: inline-block;
}

.item:hover {
  cursor: grab;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>



<div id="container">

  <div id="side">
    <h3 id="title" class="ml-2 mt-2">I'm resizable</h3>
    <i class="fa fa-align-center item"> Section 1</i>
    <i class="fa fa-align-center item"> Section 2</i>
    <i class="fa fa-align-center item"> Section 3</i>
    <i class="fa fa-align-center item"> Section 4</i>
    <i class="fa fa-align-center item"> Section 5</i>
    <i class="fa fa-align-center item"> Section 6</i>

  </div>

  <div id="editor" contenteditable="true">
    <h3 id="title">I'm editable</h3>
    <p></p>
  </div>

</div>

1 Ответ

0 голосов
/ 15 июля 2020

Чтобы избежать дублирования, вы можете добавить опцию accept: '.item' к опциям .droppable. Таким образом, можно отбросить только элемент .item, поэтому обратный вызов drop будет запущен только для элемента, который перетаскивается с боковой панели.

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

$(function() {
  $("#side").resizable({
    handles: 'e'
  });

  $("#editor").sortable().disableSelection()
    .droppable({
      accept: '.item',
      drop: function(event, ui) {
        $(this)
          .append('<div contenteditable="true" ' +
            'class="alert alert-danger">' +
            $(ui.draggable).html() + '</div>')
          .animate({
            width: "250px"
          }, 700);
      }
    });

  $(".item")
    .mousedown(function() {
      $(this).css('cursor', 'grabbing');
    })
    .draggable({
      helper: "clone"
    });
});
#container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#editor {
  flex: 1;
  margin: 0 auto;
  height: 100vh;
  background-color: DodgerBlue;
  text-align: right;
  padding: 20px;
}

#side {
  min-width: 130px;
  max-width: 260px;
  height: 100vh;
  background: #708090;
  border: 1px solid #696969;
  color: yellow;
}

.item {
  border: 1px solid #DCDCDC;
  border-radius: .4em;
  background-color: white;
  color: #000;
  padding: 12px;
  margin: 10px;
  display: inline-block;
}

.item:hover {
  cursor: grab;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

<div id="container">
  <div id="side">
    <h3 id="title" class="ml-2 mt-2">I'm resizable</h3>
    <i class="fa fa-align-center item"> Section 1</i>
    <i class="fa fa-align-center item"> Section 2</i>
    <i class="fa fa-align-center item"> Section 3</i>
    <i class="fa fa-align-center item"> Section 4</i>
    <i class="fa fa-align-center item"> Section 5</i>
    <i class="fa fa-align-center item"> Section 6</i>
  </div>
  <div id="editor" contenteditable="true">
    <h3 id="title">I'm editable</h3>
    <p></p>
  </div>
</div>
...