如果缩放，Jquery可放置区域错误

这是评论的小提琴： http ： //jsfiddle.net/7xw1m1qd/1/

以Html为例：

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; } 

问题是：如果droppable被缩放（通过transform：scale），它仍然使用droppable的原始尺寸，所以我只能在droppable的原始边界中删除元素。

我发现了一些类似的问题，但没找到工作解决方案。

Answer 1

这是一个已知的jQueryUI-Bug多年（看到这个或这个 ）。 AFAIK还没有办法解决这个问题。

也许jQueryUI-Code本身的这些变化可能会对你有所帮助。

Answer 2

谢谢雪貂。 我使用您链接中的代码解决了我的问题

刚刚在我的draggable / droppable代码之前添加了这段代码：

 $.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加载之后执行的，它有帮助。 非常感谢。