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

【问题标题】：Jquery droppable area wrong if zoomed如果缩放，Jquery 可放置区域错误
【发布时间】：2023-03-19 02:05:02
【问题描述】：

这是带有评论的小提琴： 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 被缩放（通过 transform: scale），它仍然使用 droppable 的原始尺寸，所以我只能在 droppable 的原始边界中放置元素。

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

【问题讨论】：

标签： jquery zooming transform scale droppable

【解决方案1】：

谢谢雪貂。我使用来自 Your 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 加载之后执行的，它有帮助。非常感谢。

【讨论】：

感谢它对我有用。我只需要将m[ i ].proportions({}) 更改为m[ i ].proportions = {}，因为比例不是一个函数（可能特定于我的jQuery UI 版本）。

【解决方案2】：

这是多年以来已知的 jQueryUI-Bug（请参阅 this 或 this）。 AFAIK 仍然没有办法解决这个问题。

也许these jQueryUI 代码本身的更改可能会对您有所帮助。

【讨论】：