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

我已经创建了在任何Scaling

的情况下运行的demo

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

}

在缩放容器时拖动n Drop无法正常工作

2 个答案: