Drag n Drop 在縮放容器時無法正常工作

Question

當我將容器縮放到 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/

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

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

}

Drag n Drop 在縮放容器時無法正常工作

問題描述

2 個解決方案

解決方案1
2 已采納 2016-04-13 09:09:13

解決方案2
0 2019-10-17 12:08:59

Drag n Drop 在縮放容器時無法正常工作

問題描述

2 個解決方案

解決方案1 2 已采納 2016-04-13 09:09:13

解決方案2 0 2019-10-17 12:08:59

解決方案1
2 已采納 2016-04-13 09:09:13

解決方案2
0 2019-10-17 12:08:59