[英]Drag n Drop not working proper on scaling the container
When I zoom the container to 0.5 then the DND does not behave properly.当我将容器缩放到 0.5 时,DND 无法正常工作。 Please anyone help me solve the issue.请任何人帮我解决问题。
HTML: HTML:
<div id="container">
<div id="dragContainer">
<div class="draggable">drag1</div>
<div class="draggable">drag2</div>
</div>
<div id="dropContainer">
<div class="droppable">drop1</div>
<div class="droppable">drop2</div>
</div>
</div>
JS: JS:
$(".draggable").draggable({
revert: 'invalid'
})
$(".droppable").droppable()
I have created fiddle link of the issue: https://jsfiddle.net/7eqnhsp3/我已经创建了这个问题的小提琴链接: https : //jsfiddle.net/7eqnhsp3/
I have created demo which runs in any case of Scaling我创建了可以在任何缩放情况下运行的演示
<html>
<head>
<style>
#container{
width:500px;
height:500px;
position:absolute;
top:0px;
left:0px;
border:1px solid;
-ms-transform: scale(0.8,0.8); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari */
transform: scale(1,1);
}
#dragContainer,#dropContainer{
width:200px;
height:500px;
position:relative;
margin-top:0px;
margin-left:0px;
border:1px solid gray;
float:left;
}
.draggable{
width:50px;
height:30px;
background:#990000;
border:1px solid;
z-index:1;
}
.droppable{
width:50px;
height:30px;
background:#aa0000;
border:1px solid;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script>
var zoomScale=1;
$(document).ready(function(){
$(".draggable").draggable({
revert: 'invalid'
})
$(".draggable").draggable({
//start: startFix,
drag: dragFix
});
$(".droppable").droppable()
})
function dragFix(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;
}
</script>
</head>
<body>
<div id="container">
<div id="dragContainer">
<div class="draggable">drag1</div>
<div class="draggable">drag2</div>
</div>
<div id="dropContainer">
<div class="droppable">drop1</div>
<div class="droppable">drop2</div>
</div>
</div>
</body>
</html>
for me this below code worked对我来说,下面的代码有效
let xCordinate=0;
let yCordinate=0;
//zoom percentage variable
let _SIZERATIO=25;
$(".draggable").draggable({
start: function(event) {
xCordinate=event.clientX;
yCordinate=event.clientY;
},
drag: fixDragging
});
function fixDragging(event, ui) {
var orgPostion = ui.originalPosition;
ui.position.left= (event.clientX - xCordinate + original.left) /(_SIZERATIO/100);
ui.position.top=(event.clientY - yCordinate + original.top) /(_SIZERATIO/100);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.