如果将可放置区域缩小，则可拖动元素将放置到多个可放置区域-如何修复

Question

我正在尝试将元素拖放到可放置区域。假设我有多个具有相同class的可放置区域，并且我为此drop编写了一个class事件处理程序。

如果我使用-webkit-transform:scale(0.3,0.3);缩小可放置区域，则放置事件行为很奇怪。在将可拖动元素附加到一个可放置区域之前，该放置发生在多个可放置区域上。

我认为这个问题是由于使用了scale，但我对如何解决它一无所知。谷歌搜索也无济于事。

我为DEMO设置了小提琴。

这是我的代码

脚本

var click = {
    x: 0,
    y: 0
}; // used for recording mouse cords

$('document').ready(function(event){
    for(var i = 0 ; i <= 72 ; i++)
    {
        $('<div></div>').attr({'class':'drop_zone','id':'drop_'+i}).appendTo($('.main_container'));
    }
    $('.drop_zone').each(function(index,element){
        $(this).attr('id','drop_'+index);
    })
    $('.draggable').draggable();
    $('.draggable').on('dragstart',function(event,ui){
        $('#droppable_area_ids').html('');
        click.x = event.clientX;
        click.y = event.clientY;
    })
    $('.draggable').on('drag',function(event,ui){
        var zoom = 0.3;
        var original = ui.originalPosition;

        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom,
            top:  (event.clientY - click.y + original.top ) / zoom
        };
    })
    $('.draggable').on('dragend',function(event,ui){
        click.x = 0;
        click.y = 0;
    })
    $('.drop_zone').droppable({
        tolerance: 'pointer',
        accept: ".draggable"
    });
    $('.drop_zone').on('drop',function(event,ui){
        console.log('dropped on ' + $(this).attr('id'));
        $('.draggable').css({'position':'absolute','top':'0px','left':'0px'}).appendTo($(this));
        $(this).parent().css('z-index',10);
        $('#droppable_area_ids').html($('#droppable_area_ids').html() + ' , ' + $(this).attr('id'));
    })
})

样式

*
{
    padding:0px;
    margin: 0px;
}
.main_container
{
    -webkit-transform: scale(0.3,0.3);
    width: 1000px;
    height: 1000px;
    background-color: #efefef;
    position: absolute;
    top: -200px;
    left: -220px;
}
.drop_zone
{
    background-color: #7e7e7e;
    width:100px;
    height:100px;
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}
.draggable
{
    background-color: #262626;
    width:100px;
    height: 200px;
    z-index: 100;
}
#droppable_area_ids
{
    position: absolute;
    top:100px;
    left:100px;
    width:100%;
    float:left;
}

HTML

<div class="main_container">
    <div class="draggable"></div> 
</div>
<div id="droppable_area_ids"></div>

任何帮助将不胜感激。

编辑

这恰好是KNOWN ISSUE WITH JQUERY，似乎他们不会在不久的将来修复它。如果有人为此做过工作，那将有很大帮助。

Answer 1

找到了解决方法，以防万一，将其发布在这里。

我必须修改jquery-ui.js。

m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight};

到

m[i].proportions = { width: m[i].element[0].offsetWidth*scaleFactor, height: m[i].element[0].offsetHeight*scaleFactor };

其中scaleFactor初始化为1，并在您的javascript代码中将其更改为css-transform的值，即，如果您使用-webkit-transform:scale(0.3,0.3)，请将scaleFactor设置为0.3，则bingo完成！

使用更改后的jquery-ui.js文件更新了小提琴

http://jsfiddle.net/P4FMr/4/

Answer 2

使用Harsha Venkatram的回复和此处的评论，我终于能够在我的应用程序中解决此问题。我的应用程序基于WordPress，并且使用的是Wordpress在wp-includes下包含的缩小的droppable.min.js。

该应用程序是一个具有缩放功能的编辑器，因此具有可缩放性，并且其中包含图像的某些拖放操作。但是，当将图像拖到某些区域时，按比例缩小会触发周围的多个区域，这会使您的工作变得混乱！而且该应用程序的构建方式总是将其按比例缩小，因此效果不佳...

..最后，我能够直接在缩小的可投放代码中应用此修复程序。

[首先在缩放函数中，有一个表示缩放的x数字，所以我在JavaScript代码中初始化了window.currentZoom，并使缩放函数在每次运行时将window.currentZoom的值更新为缩放数，因此我的变量window .currentZoom始终包含我的缩放值，并且因为它是一个窗口。变量，我知道我可以从任何地方访问它。

因此，在wp-includes / js / jquery / ui / droppable.min.js中，我更改了这些：

来自

this.proportions=function(){if(!arguments.length)return e||(e={width:this.element[0].offsetWidth,height:this.element[0].offsetHeight});

to

this.proportions=function(){if(!arguments.length)return e||(e={width:this.element[0].offsetWidth*window.currentZoom,height:this.element[0].offsetHeight*window.currentZoom});

来自

o[i].proportions({width:o[i].element[0].offsetWidth,height:o[i].element[0].offsetHeight}))}}

到

o[i].proportions({width:o[i].element[0].offsetWidth*window.currentZoom,height:o[i].element[0].offsetHeight*window.currentZoom}))}}

并且它通过缩放和可投放的omg修复了该错误！

我只是认为也许可以帮助其他人。祝你好运！