拖放在缩放上不起作用

Drag and drop not working on scaling

本文关键字：不起作用 缩放 拖放      更新时间：2023-09-26

我的应用程序有拖放功能。但是在缩放窗口时，拖放不能正常工作。代码如下:

<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()
    }
});

JsFiddle

您可以在拖放事件中更改拖放的位置。

基于拖放的代码不能正常工作缩放容器

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;
  }
});
相关文章：