在JQuery中拖放不允許通過ID拖動訪問

我有以下JQuery代碼給我一些問題。前兩個警報返回預期值，但警報3-5返回「未定義」。在JQuery中拖放不允許通過ID拖動訪問

總之，這應該允許我拖動任何可拖動的項目到可放置的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>

來源

2012-03-01 Nicholas

你也可以發佈你的HTML。 – DG3 2012-03-01 16:21:12

完整的HTML是非常複雜的，因爲我在一個新的'小部件'類型的界面中使用它。但我會嘗試添加一些相關的HTML。 – Nicholas 2012-03-01 18:15:16

我找到了一個替代方法通過修改兩個函數來解決這個問題：

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，一切都是非常好的。

我很想知道爲什麼發生這種情況，以及是否有更好的方法。但現在這工作。

來源

2012-03-01 20:38:42 Nicholas

在JQuery中拖放不允許通過ID拖動訪問

回答

相關問題