I want to implement a thumbnail 'drag and drop'. However, it is not easy.

Sample Site
This is difficult to explain in words.
Please take a look at the my sample page.
The middle area is ​​a grid type, and the right area is a list type.

1. <ul style="list-type:none;width:500px;" id="middle" class="connectedArea">
2. <li style="float:left;width:180px;height: 120px">..</li>...</ul>
3. <ul style="list-type:none;" id="right" class="connectedArea">
4. <li style="width:180px;height: 120px">..</li>…</ul>

1. $('#middle, #right').sortable({
2. connectWith: ".connectedArea"
3. }).disableSelection();

Try the following on my site: drag and drop a thumbnail from the Thumbnails section (middle of the page) to the Edit Thumbnails section (right side of the page). The position of the removed Thumbnail is not empty, the next thumbnail takes the position of the removed thumbnail.

How can I keep the position of the removed thumbnail blank?
[Show Image]

Please help me.