这是带有评论的 fiddle : 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;
}
问题是: 如果 droppable 被缩放(通过变换:scale),它仍然使用 droppable 的原始尺寸,因此我只能在 droppable 的原始边界中删除元素。
我发现了一些类似的问题,但没有找到有效的解决方案。
最佳答案
谢谢雪貂。我使用您的 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 加载之后执行的,它有帮助。非常感谢。
关于如果缩放,Jquery 可放置区域会出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27266009/