Bắt đầu kéo bằng phần tử khác

Question

là có thể bắt đầu kéo bằng phần tử khác không?

Ví dụ: http://jsbin.com/igohod/edit#preview

Tôi muốn bắt đầu kéo #ct khi tôi bấm vào #icon. Đáng chú ý, #icon không phải là hậu duệ của số #ct trong cây 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:
dụ mới với sắp xếp được
http://jsbin.com/igohod/8/edit#preview

Giải pháp
http://jsbin.com/igohod/13/edit#preview

Answer 1

này hoạt động, nhưng luôn luôn gắn nó vào cuối danh sách:

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

Tôi cũng đã thêm phong cách CSS và giảm các thẻ div lồng nhau:

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

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

Answer 2

Đây là một giải pháp khả thi:

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

Chỉ cần cập nhật các giá trị trái và đỉnh #ct khi bạn di chuyển biểu tượng xung quanh.

Answer 3

Một giải pháp có thể khác bằng cách sử dụng một trình trợ giúp để gói gọn đối tượng có thể kéo được. Bằng cách này bạn không cần phải nắm bắt bất kỳ sự kiện chuột hoặc thiết lập bất kỳ vị trí tùy ý. jQuery xử lý việc này cho bạn.

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