web上でビーズを詰め込んでブレスレッドをオーダーメイドで作るシステム

前提・実現したいこと

ホームページ上からブレスレッドをオーダーメイドで作れる
（動的にブレスレッドのビーズを追加、並び替えが出来る）
システムを作ろうとしています。

発生している問題

ビーズを一覧からドラッグしてドロップ欄（ブレスレッド）にドロップしてオーダーメイドのブレスレッドを作りたいのですが、要素を環状に追加する方法がわからず頓挫しています。
要素を動的に環状に追加する方法はあるのでしょうか？
下記ソース以外の方法でも、他にやり方がありましたら、ご教授お願いします。

該当のソースコード

javascript
1<!DOCTYPE html>  
2<html lang="ja"> 
3<head>
4    <meta charset="UTF-8">
5    <script src="./js/jquery-ui-1.8.20/jquery-1.7.2.js"></script>
6    <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.core.js"></script>
7    <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.widget.js"></script>
8    <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.mouse.js"></script>
9    <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.draggable.js"></script>
10    <script src="./js/jquery-ui-1.8.20/ui/jquery.ui.sortable.js"></script>
11    <link rel="stylesheet" href="./js/jquery-ui-1.8.20/themes/base/jquery.ui.theme.css">
12    <style>
13        <!--
14
15/* 大枠 */
16#waku {
17    border-style:solid;
18    border-width:1px;
19    border-color:black;
20    padding: 10px;
21}
22 
23/* 右枠・ドラッグ枠 */
24#dragArea {
25    width:255px;
26    padding: 10px;
27    border-style:solid; 
28    border-width:3px; 
29    border-color:blue;
30    float:right;
31}
32 
33/* divのfloatの解除用 */
34.clear {
35    clear:both; 
36}
37 
38/* 左枠・ドロップ枠 */
39#dropArea {
40    padding: 10px;
41    border-style:solid; 
42    border-width:3px; 
43    border-color:red;
44    float:left;
45}
46 
47/* 左枠・ドロップ枠 */
48#dropArea ul {
49    list-style-type: none;
50    margin: 0;
51    padding: 5px;
52    margin-bottom: 10px;
53}
54 
55#dropArea li {
56    margin: 5px;
57    padding: 5px;
58    width: 70px;
59	display: inline;
60}
61 
62#sort-drop-area {
63    /*width: 552px;*/
64    padding: 5px 0;
65    border: 1px dashed yellow;
66    /*border-radius: 10px;*/
67    border-width: 3px;
68}
69
70    -->
71
72    </style>
73</head>
74 
75<body>
76<div id="waku">
77 
78    <h1>Drag And Drop Sample</h1>
79 
80    <!-- Dropエリア -->
81    <div id="dropArea" >
82        <h3>枠内に要素をドロップする。ブレスレッドとしてビーズを環状に追加したい</h3>
83        <ul id="sort-drop-area"  >
84            <li class="ui-state-default">
85                   ①
86            </li>
87            <li class="ui-state-default">
88                   ②
89            </li>
90        </ul>
91    </div>
92
93    <!-- Dragエリア -->
94    <div id="dragArea">
95        <h3>要素をドラッグする</h3>
96
97        ●ビーズ一覧にする予定
98        <ul>
99            <li id="insert-object" class="ui-state-highlight">③</li>
100            <li>④</li>
101        </ul><br />
102    </div>
103    <div class="clear"></div>
104
105	<input type="button" value="Check" onclick='fncPutCtrl();'>
106</div>
107 
108<script>
109    window.onload = function() {
110
111        // 
112        jQuery( '#sort-drop-area' ) . sortable( {
113                revert: true
114        } );
115
116        // クラスはクローン可、IDは不可。
117        jQuery( '#dragArea' ).find('img,li,div').draggable( {
118            connectToSortable: '#sort-drop-area',
119            helper: 'clone',
120            revert: 'invalid',
121        } );
122
123        // 
124        jQuery( '#dragArea' ) . disableSelection();
125
126	}
127
128	var fncPutCtrl = function () {
129		//alert("Hello world!");
130		console.log( document.body );
131	}
132
133</script>
134 
135</body>
136</html>