拖放在缩放容器时无法正常工作答案

【问题标题】：Drag n Drop not working proper on scaling the container拖放在缩放容器时无法正常工作
【发布时间】：2016-04-13 05:27:30
【问题描述】：

当我将容器缩放到 0.5 时，DND 无法正常运行。请任何人帮我解决这个问题。

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：

$(".draggable").draggable({
    revert: 'invalid'
})
$(".droppable").droppable()

我已经创建了问题的小提琴链接：https://jsfiddle.net/7eqnhsp3/

【问题讨论】：

感谢@ArulKumar 编辑...
欢迎，以后在问题本身中添加可能的代码。如果小提琴链接不起作用或小提琴服务器关闭，没有人可以帮助您。

标签： jquery html jquery-ui drag-and-drop

【解决方案1】：

我创建了可以在任何缩放情况下运行的演示

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

【讨论】：

【解决方案2】：

对我来说，下面的代码有效

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

}

【讨论】：

请描述您的解决方案。