Перетаскивание в JQuery не позволяет доступ перетаскиваемого по идентификатору

Question

У меня есть следующий код JQuery, который вызывает у меня некоторые проблемы.Первые два оповещения возвращают ожидаемые значения, но оповещения 3-5 возвращают «undefined».

Короче говоря, это должно позволить мне перетаскивать любой перетаскиваемый элемент на элемент DROPBARB.Как только это произойдет, должна быть запущена функция, чтобы посмотреть на идентификаторы и определить, какую последующую функцию вызывать (каждая часть страницы имеет свой собственный набор функций).Эта следующая функция должна иметь доступ к исходным элементам по идентификатору.

Может кто-нибудь, пожалуйста, пролить свет на это для меня?Я бью головой об стену здесь.Спасибо.

$( ".draggable").draggable({
    opacity: 1,
    revert: 'invalid',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    appendTo: $("#POCONS02"),
    containment: 'window',
    start: function(event, ui) {
        ui.helper.css("z-index" , "1000000");
        ui.helper.css("border" , "1px solid ##000000");
    },
    stop: function(event, ui) {
        $('body').css("cursor", "auto");
    }
});

// Attaches droppable events.
$( ".droppable").droppable({
    hoverClass: 'drophover',
    tolerance: 'pointer',
    accept: function(dropElem) {
        var targetID    = $(this).attr("id");
        var dragID      = $(dropElem).attr("id");

        if (targetID.substr(0, 10) == 'POCONSOL02') {
            if (targetID == 'POCONSOL02_unGrouped' && dragID.substr(0, 10) == 'POCONSOL02') {
                return true;
            } else if (targetID == 'POCONSOL02_grouped' && dragID.substr(0, 10) == 'POCONSOL02') {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    },
    drop: itemDropped
});


 function itemDropped (event, ui) {
var targetID    = $(this).attr("id");
var itemID      = $(ui.draggable).attr("id");

if (targetID.substr(0, 10) == 'POCONSOL02') {
    itemDroppedPOCONSOL02($.trim(targetID), $.trim(itemID));
}
 }

function itemDroppedPOCONSOL02 (targetID, itemID) {
    alert(targetID);
    alert("-" + itemID + "-");
    alert($("#" + itemID).attr("id"));
    alert($("#" + itemID).parent().attr("id"));

    $("#" + itemID).appendTo("#" + targetID);
    alert($("#" + itemID).parent().attr("id"));
    $("#POCONS02SaveButton").removeAttr("disabled");
}

Соответствующий HTML:

        <div style="text-align:center;">
            <table cellpadding="5" cellspacing="0" style="width:100%; height:40%;">
                <tr>
                    <td>    
                        <div style="text-align:left;" class="tableControlHeaderDiv">
                            <table class="tableControlHeader" cellpadding="0" cellspacing="0" style="width:100%;">
                                <tr style="text-align:center;" class="tableColumnHeader">
                                    <td style="text-align:center; width:20%;" class="tableControlBorder">Reference Number</td>
                                    <td style="text-align:center; width:25%;" class="tableControlBorder">Part</td>
                                    <td style="text-align:center; width:15%;" class="tableControlBorder">Due Date</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Price</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Gauge</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Width</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                </tr>
                            </table>
                        </div>      
                        <div id="POCONSOL02_unGrouped" class="droppable" style="height:90%; overflow:auto;">
                            <cfloop query="getPOs">
                                <table id="POCONSOL02_item#getPOs.po_line#" cellpadding="0" cellspacing="0" class="draggable tableControlInnerTable">
                                    <tr>
                                        <td style="width:20%;"  class="tableControlBorder">#getPOs.po_line#</td>
                                        <td style="width:25%;"  class="tableControlBorder">#getPOs.finished_part_nbr#</td>
                                        <td style="width:15%;"  class="tableControlBorder">#getPOs.Due_Date#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.Unit_Price#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.gauge#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.gauge_um#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.width#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.width_um#</td>
                                    </tr>
                                </table>
                            </cfloop>
                        </div>
                    </td>
                </tr>
            </table>

            <table cellpadding="5" cellspacing="0" style="width:100%; height:40%;">
                <tr>
                    <td>    
                        <div style="text-align:left;" class="tableControlHeaderDiv">
                            <table class="tableControlHeader" cellpadding="0" cellspacing="0">
                                <tr style="text-align:center;" class="tableColumnHeader">
                                    <td style="text-align:center; width:20%;" class="tableControlBorder">Reference Number</td>
                                    <td style="text-align:center; width:25%;" class="tableControlBorder">Part</td>
                                    <td style="text-align:center; width:15%;" class="tableControlBorder">Due Date</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Price</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Gauge</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Width</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                </tr>
                            </table>
                        </div>      
                        <div id="POCONSOL02_grouped" class="droppable" style="height:90%; overflow:auto;">
                            <cfloop query="getPOs">
                                <table id="POCONSOL02_item99" cellpadding="0" cellspacing="0" class="draggable tableControlInnerTable">
                                    <tr>
                                        <td style="width:20%;"  class="tableControlBorder">#getPOs.po_line#</td>
                                        <td style="width:25%;"  class="tableControlBorder">#getPOs.finished_part_nbr#</td>
                                        <td style="width:15%;"  class="tableControlBorder">#getPOs.Due_Date#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.Unit_Price#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.gauge#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.gauge_um#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.width#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.width_um#</td>
                                    </tr>
                                </table>
                            </cfloop>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

Answer 1

Я нашел альтернативный способ решения этой проблемы, изменив две функции:

function itemDropped (event, ui) {
    var targetID    = $(this).attr("id");

    if (targetID.substr(0, 10) == 'POCONSOL02') {
            itemDroppedPOCONSOL02($.trim(targetID), ui);
    }
}

function itemDroppedPOCONSOL02 (targetID, ui) {
    //alert(targetID);
    //alert("-" + itemID + "-");
    //alert($(ui.draggable).attr("id"));
    //alert($(ui.draggable).parent().attr("id"));

        $(ui.draggable).appendTo("#" + targetID);
    //alert($(ui.draggable).parent().attr("id"));
    $("#POCONS02SaveButton").removeAttr("disabled");
}

По какой-то причине itemID неправильно передается из первой функции secton. И почему-то событие не проходит правильно. Но, оценивая событие немедленно и передавая идентификатор, а затем оценивая пользовательский интерфейс в вызываемой функции, все становится превосходным.

Мне было бы интересно услышать, почему это происходит и есть ли лучший способ. Но пока это работает.