jQuery可拖动& droppable获取源容器(可拖动来源) [英] jquery draggable & droppable get source container (that draggable came from)

问题描述

我为这个jsfiddle设计了一个不同的答案，我想知道如何获得droppable来自的souce容器

I made this jsfiddle for a different answer and I'm wondering how I can get the souce container that the droppable came from

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>   

推荐答案

您可以使用在可拖动对象的start事件中设置的变量，并在可放置对象的stop事件中获取该信息.

You can use a variable which you set in the start event of the draggable and get that info in the stop event of the droppable.

$(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 如果页面上的表格多于这些表格，您可能会考虑为它们提供一个可以正确识别它们的类.

See my updated jsfiddle If you have more than those tables on your page you might think about giving them a class to properly identify them.

这篇关于jQuery可拖动& droppable获取源容器(可拖动来源)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！