如果放大

Question

這裏jQuery的可投放區域錯的是與評論小提琴： http://jsfiddle.net/7xw1m1qd/1/

的Html例如：

<div class="droppable"></div> 
<div class="drag"></div> 

JS例如：

$('.drag').draggable({}); 

$('.droppable').droppable({ 
    out: function() { 
     $('.drag').css('background-color', 'red'); 
    }, 

    drop: function() { 
     $('.drag').css('background-color', 'green'); 
    }, 
}); 

CSS例如：

.droppable { 
    width: 200px; 
    height: 200px; 
    transform: scale(2);  
    -webkit-transform: scale(2);  
    -ms-transform: scale(2); 
    background-color: #C3C3C3; 
} 

.drag { 
    background-color: black; 
    width: 20px; 
    height: 20px; 
    z-index: 10; 
    position: absolute; 
    top: 10px; 
    left: 350px;  
} 

問題是： 如果可以放大（通過transform：scale），它仍然使用原始尺寸進行放置，因此我只能將元素放入可放下的原始邊界。

我發現了一些類似的問題，但沒有找到工作解決方案。

Answer 1

這是一個已知的jQueryUI-Bug多年以來（請參閱this或this）。 AFAIK仍然沒有辦法解決這個問題。

也許these在jQueryUI-Code本身的變化可能會幫助你。

Answer 2

謝謝Ferret。我解決了使用代碼我的問題，從您link

只需添加此代碼之前我可拖動/可棄代碼：

$.ui.ddmanager.prepareOffsets = function(t, event) { 
    var i, j, 
     m = $.ui.ddmanager.droppables[ t.options.scope ] || [], 
     type = event ? event.type : null, // workaround for #2317 
     list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack(); 

    droppablesLoop: for (i = 0; i < m.length; i++) { 

     // No disabled and non-accepted 
     if (m[ i ].options.disabled || (t && !m[ i ].accept.call(m[ i ].element[ 0 ], (t.currentItem || t.element)))) { 
      continue; 
     } 

     // Filter out elements in the current dragged item 
     for (j = 0; j < list.length; j++) { 
      if (list[ j ] === m[ i ].element[ 0 ]) { 
       m[ i ].proportions().height = 0; 
       continue droppablesLoop; 
      } 
     } 

     m[ i ].visible = m[ i ].element.css("display") !== "none"; 
     if (!m[ i ].visible) { 
      continue; 
     } 

     // Activate the droppable if used directly from draggables 
     if (type === "mousedown") { 
      m[ i ]._activate.call(m[ i ], event); 
     } 

     m[ i ].offset = m[ i ].element.offset(); 
     m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth * MyEditor.currentZoom, height: m[ i ].element[ 0 ].offsetHeight * MyEditor.currentZoom }); 
    } 

}; 

這之後的jQuery和jQuery UI的負載進行，它幫助。非常感謝。