2

我正在尝试将元素拖放到可放置区域。假设我有多个相同的可放置区域，并且为此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>

任何帮助将不胜感激。

编辑

This happens to be a KNOWN ISSUE WITH JQUERY and seems that they won't be fixing it in the near future. If anybody has done a workaround for this, it'll be of great help.

4

2 回答 2

8

Found a workaround , posting it here just in case it helps anyone else.

I had to modify jquery-ui.js.

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

to 

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

where scaleFactor is initialized to 1 and is changed in your javascript code to the value of css-transform , i.e., If you use -webkit-transform:scale(0.3,0.3) , set the scaleFactor to 0.3 and bingo , you are done!

Updated fiddle using the changed jquery-ui.js file

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

于 2013-11-07T10:19:31.623 回答
1

using the response from Harsha Venkatram and the comments in here I was finally able to fix this in an application I am working on. The application is based on WordPress and it uses a minified droppable.min.js included by Wordpress under wp-includes.

该应用程序是一个编辑器，它具有缩放功能，因此它具有可扩展性，并且其中有一些图像的拖放操作。但是，当将图像拖到某些区域时，它会在按比例缩小时触发周围的多个区域，这会破坏您的工作！而且该应用程序的构建方式总是按比例缩小，因此无法正常工作...

..所以最后我能够直接在缩小的可放置代码中应用修复。

首先在缩放函数中，有一个代表缩放的 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});

到

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 修复了错误！

我只是想也许它可以帮助别人。祝你好运！

哦，也许我应该在我的主题中复制这个文件，确保 WP 更新不会删除我的更改。

最后，在我的主题中复制这个文件从未奏效，所以我从 jquery 下载了一个新的 jquery-ui 并将其放入我的主题中。在那里我找到了我修改的这些行。那也有效..

// Retrieve or derive the droppable's proportions
            return proportions ?
                proportions :
                proportions = {
                    width: this.element[ 0 ].offsetWidth*window.currentZoom,
                    height: this.element[ 0 ].offsetHeight*window.currentZoom
                };


// 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*window.currentZoom,
            height: m[ i ].element[ 0 ].offsetHeight*window.currentZoom
        } );
于 2020-03-21T01:56:24.483 回答