用另一个元素开始拖动

Question

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

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

我想#ct点击它时开始拖动#icon.值得注意的是,#icon它不是来自#ctDOM树.

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();
});

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

解决方案
http://jsbin.com/igohod/13/edit#preview

Answer 1

这有效,但始终将其附加到列表的末尾:

 $(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/