[英]Drag and drop not working on scaling
我的应用程序具有拖放功能。 但是在缩放窗口时,拖放操作无法正常进行。 这是代码。
<div class="scaled">
<div class="draggable" id="draggable"></div>
<div class="droppable" id="droppable"></div>
</div>
CSS代码
.draggable {
height: 50px;
width:50px;
background-color: yellow;
}
.droppable {
height: 50px;
width:50px;
border: 1px solid;
margin-top: 50px;
}
.scaled {
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
jQuery代码
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
alert()
}
});
您可以在拖动事件中更改拖放的位置。
var zoomScale = 0.5
$(".draggable").draggable({
drag: function(event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
var newLeft = ui.originalPosition.left + changeLeft / zoomScale; // adjust new left by our zoomScale
var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale
ui.position.left = newLeft;
ui.position.top = newTop;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.