我正在尝试拖放元素到可放置的区域。假设我有多个具有相同class
的可放置区域,并为此drop
编写了class
事件处理程序。
如果我使用-webkit-transform:scale(0.3,0.3);
缩小我的可放置区域,则放置事件会很奇怪。在可拖动元素连接到其中一个可放置区域之前,掉落发生在多个可放置区域上。
我认为这个问题是因为使用了scale
,但我对如何修复它一无所知。谷歌搜索也没有帮助。
我为DEMO设置了一个小提琴。
这是我的代码
THE SCRIPT
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'));
})
})
THE STYLE
*
{
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,似乎他们不会在不久的将来修复它。如果有人为此做了一些工作,那将会有很大的帮助。
答案 0 :(得分:6)
找到一种解决方法,将其发布在此处以防万一它可以帮助其他任何人。
我不得不修改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文件
更新了小提琴答案 1 :(得分:1)
使用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});
到
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
} );