[英]Drag and drop not working on scaling
My Application has the Drag and drop. 我的应用程序具有拖放功能。 But on scaling the window drag and drop not working properly.
但是在缩放窗口时,拖放操作无法正常进行。 Here is the code.
这是代码。
<div class="scaled">
<div class="draggable" id="draggable"></div>
<div class="droppable" id="droppable"></div>
</div>
CSS Code 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 code jQuery代码
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
alert()
}
});
You can alter the position of the drag-n-drop in the drag event. 您可以在拖动事件中更改拖放的位置。
Code based on Drag n Drop not working proper on scaling the container 基于Drag n Drop的代码在缩放容器时无法正常工作
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.