开始拖动另一个元素

是否可以用另一个元素开始拖动？

例如：http://jsbin.com/igohod/edit#preview http://jsbin.com/igohod/edit#preview

我想开始拖动#ct当我点击#icon。尤其，#icon不是后裔#ct在 DOM 树中。

html

  <div style="position:absolute; top:20px; left:10px;">
    <div id="icon">Icon</div>
  </div>

  <div style="position:absolute; top:20px; right:10px;">
    <div id="ct">start this drag when you drag the icon</div>
  </div>

js

$(document).ready(function()
{
  // $('#icon').draggable();
  $('#ct').draggable();
});

UPDATE:
可排序的新示例
http://jsbin.com/igohod/8/edit#preview http://jsbin.com/igohod/8/edit#preview

Solution
http://jsbin.com/igohod/13/edit#preview http://jsbin.com/igohod/13/edit#preview

这是可行的，但总是将其附加到列表的末尾：

 $(document).ready(function() {
   $('#icon').mousedown(function(e) {
     $('#ct').trigger(e);
   });
   $('#dropHere').sortable({ placeholder: 'ui-state-highlight' });
   $('#ct').draggable({ connectToSortable: '#dropHere' });

我还添加了 CSS 样式并删除了嵌套的 div 标签：

 #dropHere div{width:10; height:10; padding:10px; border:1px solid #000;}

http://jsbin.com/igohod/9/ http://jsbin.com/igohod/9/