2013-06-13 60 views
4

我做這個的jsfiddle了不同的答案,我想知道我怎麼可以得到可放開從jQuery的可拖動和投擲的GET源容器(即拖動來自)

http://jsfiddle.net/d7wsz/8/

附帶的烴源容器jquery是

$("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    start: function (event, ui) { 
     $(this).css('opacity', '.5'); 
     }, 
    stop: function (event, ui) { 
     $(this).css('opacity', '1'); 
    } 
}); 

$("#Table1, #Table2, #Table3").droppable({ 
drop: function (event, ui) { 
    $(ui.draggable).appendTo(this); 
    alert($(ui.draggable).text() + 
      ' was draged from ' + 
      'XX' + ' to ' + 
      $(this).attr('id') + '.'); 

} 

});

和HTML是

<h1>Table 1</h1> 
<table id="Table1"> 
<tr><td>Row 3</td></tr> 
<tr class='disabled'><td>Row 4</td></tr> 
<tr><td>Row 5</td></tr> 
</table> 

<h2>Table 2</h2> 
<table id="Table2"> 
<tr><td>Row 8</td></tr> 
<tr class='disabled'><td>Row 9</td></tr> 
<tr><td>Row 10</td></tr> 
</table> 

<h2>Table 3</h2> 
<table id="Table3"> 
<tr><td>Row 11</td></tr> 
<tr><td>Row 12</td></tr> 
</table> 

回答

9

您可以使用您的start事件可拖動的設置變量,並獲得在stop事件可投放的這些信息。

$(function() { 
    var sourceElement; 
    $("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({ 
     helper: 'clone', 
     revert: 'invalid', 
     start: function (event, ui) { 
      $(this).css('opacity', '.5'); 
      //NEW 
      sourceElement = $(this).closest('table').attr('id'); 
     }, 
     stop: function (event, ui) { 
      $(this).css('opacity', '1'); 
     } 
    }); 

    $("#Table1, #Table2, #Table3").droppable({ 
     drop: function (event, ui) { 
      $(ui.draggable).appendTo(this); 
      //alert sourceElement 
      alert($(ui.draggable).text() + 
       ' was draged from ' + sourceElement + ' to ' + $(this).attr('id') + '.'); 

     } 
    }); 

}); 

看到我更新jsfiddle 如果你有比你想象的關於給他們一個類來正確識別這些網頁上的這些表的更多。