拖放不适用于缩放

Posted 2023-05-08

【中文标题】拖放不适用于缩放

【英文标题】：Drag and drop not working on scaling

【发布时间】：2015-09-24 16:58:08

【问题描述】：

我的应用程序具有拖放功能。但是在缩放窗口拖放时无法正常工作。这是代码。

<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

【问题讨论】：

查看此页面：gungfoo.wordpress.com/2013/02/15/…

这对我没有多大帮助...

【参考方案1】：

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

代码基于Drag n Drop not working proper on scaling the container

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