how to sort elements while dropping using jquery ui?

Question

I have very simple jquery ui code to drag and drop elements. However, I had a problem, that I can't sort dropped element on drop !!

I used jquery sortable functionalty but I never know where is the problem !!

I have full code example here. And if I could explain it in other way, I need to drag and drop section 1 then section 2 and finally sort section 3 between section 1 and 2 while dropping it. would you please help me ?

$(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>

Answer 1

In order to avoid the duplication, you can add the accept: '.item' option to the .droppable options. This way, only .item element can be dropped so the drop callback will be fired only for element which dragged from the side bar.

Regarding the drag + sort in the same without dropping, I'm not sure it is possible. I believe that the sort mechanizm is working only for items that already in in the container, but you you drag an element it's not in the container yet.

$(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>