如何在jQuery UI中同时使用sortable与draggable功能

功能需求：将排序列表中的项拖拽至外部区域可自由移动，拖拽回排序列表后可恢复排序功能。

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">

JavaScript实现 #

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

效果演示 #

内容的提问来源于stack exchange，提问作者毛振华