JQuery UI - 可拖动元素被拖放到可放置区域的多个可放置区域按比例缩小

Posted

技术标签:

【中文标题】JQuery UI - 可拖动元素被拖放到可放置区域的多个可放置区域按比例缩小【英文标题】:JQueryUI - draggable element gets dropped onto multiple droppable areas if the droppable areas are scaled down 【发布时间】:2013-11-16 05:10:38 【问题描述】:

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

如果我使用-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,而且他们似乎不会在不久的将来修复它。如果有人为此做了解决方法,那将有很大帮助。

【问题讨论】:

您正在测试什么浏览器和版本? Chrome 版本 30.0.1599.101 参考这个你可能会有一个想法。***.com/questions/2985713/multiple-droppable @JeevaJsb:嗯,不。那不是我所追求的。 【参考方案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/

【讨论】:

我尝试使用它,但它似乎出现了故障。有没有其他人成功过?这也不在新的 jQuery ui 中 :( 我用它来使 1.8 版工作。变量名“m”不同,并且在代码中有两个位置的比例属性设置类似。后者是需要添加 scaleFactor 的。谢谢你哈沙! @Robert,很高兴它有帮助。如果您可以将此处的小提琴链接到您必须在较新版本的 jQuery UI 中进行的更改,它可能会帮助遇到类似问题的人:)【参考方案2】:

使用 Harsha Venkatram 和这里的 cmets 的响应,我终于能够在我正在处理的应用程序中解决这个问题。该应用程序基于 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);

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

【讨论】:

以上是关于JQuery UI - 可拖动元素被拖放到可放置区域的多个可放置区域按比例缩小的主要内容,如果未能解决你的问题,请参考以下文章

jquery draggable - 删除拖动元素

jQuery-UI 可拖动和可放置项目变为不可拖动

jQuery UI - 放置事件后克隆可放置/可排序列表

拖放后再次放置元素

拖放到动态创建的 div 后,Jquery-ui 可拖动无法正常工作

jQuery UI,可拖动,可放置,自动滚动