用另一个元素开始拖动

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

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

我想点击#ct时开始拖动#icon 。 值得注意的是， #icon并非来自DOM树中的#ct 。

HTML

  
 
Icon
 
 
 
start this drag when you drag the icon
  

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/

Answer 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的左侧和顶部值即可。

Answer 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