Как отсортировать упавший элемент с помощью jquery sortable? - PullRequest
Новая
       137

Как отсортировать упавший элемент с помощью jquery sortable?

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

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

Мне в основном нужно знать, какие события или где я должен контролировать свои сортировки и как это сделать гладко.

Я уже сделал пример, написанный на codepen 

$( function() {
      $("#side").resizable({
       handles: 'e'
    });
  
      $("#editor").sortable()
        .droppable({
      drop: function( event, ui ) {
        $(this).append('<div class="alert alert-danger">' + 
                       $(ui.draggable).html() + '</div>')
                       .animate({width: "100%"}, 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;
}
<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>



<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>
</div>

</div>
...