我有以下JQuery代码给我一些问题。前两个警报返回预期值，但警报3-5返回“未定义”。
简而言之，这应该允许我将任何可拖动的项目拖动到可放置的div上。一旦发生这种情况，就应该触发一个函数来查看id并确定要调用哪个后续函数（页面的每个部分都有自己的一组函数）。下一个函数应该能够通过id访问原始元素。
有人可以帮我解释一下吗？我在这里撞墙。感谢。
$( ".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>
答案 0 :(得分：0)
我找到了另一种方法来通过修改两个函数来解决这个问题：
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函数。由于某种原因，事件没有正确传递。但是通过立即评估事件并传递id，然后在被调用函数中评估ui，一切都很好。
我有兴趣听听为什么会这样，如果有更好的方法。但是现在这很有效。