Начать перетаскивание с помощью другого элемента

Можно ли запустить перетаскивание с помощью другого элемента?

Например: 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();
});


ОБНОВЛЕНИЕ:
Новый пример с сортировкой
http://jsbin.com/igohod/8/edit#preview

Решение
http://jsbin.com/igohod/13/edit#preview

ОТВЕТЫ

Ответ 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/

Ответ 2

Вот возможное решение:

$('#icon').draggable({drag: function(event, ui) {
    $("#ct").parent().css("top", 20 + parseInt($(this).css("top")));
    $("#ct").parent().css("left", 200 + parseInt($(this).css("left")));
}});

Просто обновляйте левое и верхнее значения #ct, когда вы перемещаете значок вокруг.

Ответ 3

Еще одно возможное решение с использованием помощника для инкапсуляции объекта перетаскивания. Таким образом, вам не нужно ловить какие-либо события мыши или устанавливать произвольные позиции. jQuery обрабатывает это для вас.

$(document).ready(function()
{

  $('#dropHere').sortable({ 
    placeholder: 'ui-state-highlight',
    receive: function(event, ui) {
      $(this).find('.drophandle').replaceWith(ui.helper);
      $(ui.helper).attr('style','');
    }
  });

  $('#icon').addClass('drophandle').draggable({
       connectToSortable: '#dropHere',
       cursorAt: { top: 15, left: 225 },
       helper: function() { return $('#ct')[0]; }
  });

});

http://jsbin.com/igohod/25