开始拖动另一个元素 [英] Start drag with another element

问题描述

是否可以从另一个元素开始拖动?

is it possible to start the drag with another element?

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

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

I want to start dragging #ct when I click on the #icon. Notably, #icon is not descended from #ct in the DOM tree.

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

更新:
具有sortable的新示例
http://jsbin.com/igohod/8/edit#preview

UPDATE:
New example with sortable
http://jsbin.com/igohod/8/edit#preview

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

推荐答案

此方法有效，但始终将其附加到列表的末尾:

This works, but always appends it to the end of the list:

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

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

I also added the CSS style and dropped the nested div tags:

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

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

这篇关于开始拖动另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！