这是带有评论的小提琴: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 的原始边界中放置元素。
我发现了一些类似的问题,但没有找到有效的解决方案。