How to use both sortable and draggable in jQuery UI simultaneously

html:

<div class="item-list" id="list">
  <div class="draggable" data-index="0" draggable="true">Draggable1</div>
  <div class="draggable" data-index="1" draggable="true">Draggable2</div>
  <div class="draggable" data-index="2" draggable="true">Draggable3</div>
  <div class="draggable" data-index="3" draggable="true">Draggable4</div>
  <div class="draggable" data-index="4" draggable="true">Draggable5</div>
</div>
<div class="drawing-board dropzone" id="dropzone">

js:

$("#list").sortable().disableSelection(); 
$('.draggable').draggable({connectToSortable: "#list"});

Demo

Gif Video

Drag the items in the sorting table to the outside and allow them to move freely, and then drag them back to the sorting table to repeat the previous function