jquery - 如何将 jQuery 的 droppable 函数用于转换后的 div？

Question

$(function(){
  $('#dragTbl tr').draggable({
    cursor:"move", 
    zIndex: 100,
    cursorAt: {top:20, left:38, bottom:15 },
    iframeFix: true,
    helper: function( event ) { 
      return $( "<div class='drag-item'>"+ $(this).attr('id') +"</div>" );
    },
    start: function() {
    },
    drag: function() {   
    },
    stop: function(){
    }                               
  }); 

  $('.dropCol').droppable({
    tolerance: "pointer",
    drop: function( event, ui ){
      var ids = ui.draggable.attr('id');                           
      var avail = $(this).find('.tx').text().length == 0 ? true : false;
      if(avail){
        $(this).find('.tx').text(ids);
        $(this).find('.tx').prev().val(ids);
        $('#'+ids).draggable( "option", "disabled", true );
      }else{
        return;
      }
    }
  });

.dropCol{
  border: 1px solid #000;
  vertical-align: middle !important;
  width: 40px;
  text-align: center;
  background: #f2f3f3;
  //transform: rotate(20deg);
  float:left;
}

#dropTbl{
  width:100%;
}

.drag-item{
  background: none repeat scroll 0 0 #675C5C;
  color:white;
  padding:10px; // 7px;
  font-weight:bold;
  border-radius:20px;
}

.tx{
  //margin-left:-98px;
  margin-top: 135px;
}

.eleDiv{
  text-align: center;
  width: 100%;
  float: left;
  border: 1px solid;
  padding: 17px;
  //margin-left:-72px;
}

.rht-mrgn{
  margin-right:45px;        
}        
.lft-mrgn{
  margin-left:45px;        
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="text-align:center;">
                <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXX FOR INCLINED TYPE BOXES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
                
  <div>
    <center>
      <apex:variable value="{!1}" var="count"/>
      <table cellspacing="1" cellpadding="0" border="0">
        <tr>
          <td colspan="5" valign="middle" style="vertical-align:middle;">
            <div id="dropTbl">                                            
              <apex:repeat value="{!lftmodList}" var="mod">
                <div id="{!count}" class="dropCol {!IF(count = lftmodList.size ,'rht-mrgn','')}" style="height:270px;transform: rotate(20deg);">
                  <apex:inputHidden value="{!mod.lbl}"/>
                  <p class="tx"></p> 
                </div>
                <apex:variable value="{!count+1}" var="count"/>
              </apex:repeat>
            </div>
          </td>
          <td colspan="2" style="border:1px solid #000;min-width:65px;transform: rotate(0deg);">&nbsp;</td>
          <td colspan="5" valign="middle" style="vertical-align:middle;">
            <div id="dropTbl">
              <apex:repeat value="{!rhtmodList}" var="mod">
                <div id="{!count}" class="dropCol {!IF(count = lftmodList.size+1 ,'lft-mrgn','')}" style="height:270px;transform: rotate(-20deg);">
                  <apex:inputHidden value="{!mod.lbl}"/>
                  <p class="tx"></p> 
                </div>
                <apex:variable value="{!count+1}" var="count"/>
              </apex:repeat>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="12" valign="middle" style="vertical-align:middle;">
            <div style="width:100%;float: left;">
              <div class="eleDiv">
                <span><b>Element Posiotion</b></span>
              </div>
            </div>
          </td>                                  
        </tr>                        
      </table>
    </center>
  </div>
  </apex:outputPanel> 

<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXxxx FOR FLAT TYPE BOXES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<apex:outputPanel rendered="{!IF(type == 'Flat',true,false)}">  
  <table id="dropTbl" cellspacing="0" cellpadding="0" border="0" style="width:55%;">
    <apex:variable value="{!1}" var="count"/>
    <apex:repeat value="{!modList}" var="mod">
      <tr>
        <td id="{!count}" class="dropCol" style="height:32px;">
          <apex:inputHidden value="{!mod.lbl}"/>
          <p class="tx" style="transform: rotate(-21deg);"></p> 
        </td>
      </tr>
      <apex:variable value="{!count+1}" var="count"/>
    </apex:repeat>
  </table>

  <table cellspacing="0" cellpadding="0" border="1" style="width: 55%;margin-top:5px;text-align: center;">
    <td colspan="{!modList.size+2}" style="vertical-align:middle;height:50px;"><b>Element Posiotion</b></td>
  </table>
</apex:outputPanel>
</div>

我有使用css'transform：rotate（20deg）'将div转换20度的div。我正在尝试从表中拖动一行并放入转换后的 div 中。但是放置区域不是显示在转换后的div上，而是显示在div的正常位置上。我在删除元素时遇到问题。请帮我。下面是代码片段：