小编Jak*_*ubK的帖子

如果缩放,jQuery 可放置区域错误

这是带有评论的小提琴:http : //jsfiddle.net/7xw1m1qd/1/

html例如:

<div class="droppable"></div>
<div class="drag"></div>
Run Code Online (Sandbox Code Playgroud)

以JS为例:

$('.drag').draggable({});

$('.droppable').droppable({
    out: function() {
      $('.drag').css('background-color', 'red');
    },

    drop: function() {
      $('.drag').css('background-color', 'green');
    },
});
Run Code Online (Sandbox Code Playgroud)

以 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;    
}
Run Code Online (Sandbox Code Playgroud)

问题是:如果 droppable 被缩放(通过变换:缩放),它仍然使用 droppable 的原始尺寸,所以我只能在 droppable 的原始边界中放置元素。

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

jquery transform droppable scale zooming

2
推荐指数
1
解决办法
3069
查看次数

标签 统计

droppable ×1

jquery ×1

scale ×1

transform ×1

zooming ×1