缩放后拖放错误的注册

我正在处理用户必须将正确的项目拖放到技术图纸上的项目。例如，主板：用户将看到一个CPU或DDR内存的图片，并且他必须将该CPU拖到该插槽上，并将该内存拖入对应的插槽中。缩放后拖放错误的注册

它工作得很好，它被加载到我们的网站内的iFrame。由于这个网站是响应式的，所以拖动应用程序需要调整大小。我们通过使用CSS3变换缩放body元素来调整iFrame的大小。

这也适用，但弹出的问题是我们所有的拖放区都关闭了。现在，必须将CPU放在插槽旁边以使其反应。

这里我的意思一个简单的例子：http://jsfiddle.net/78EYh/

只需拖动蓝色方块到红色矩形，你会看到红色矩形注册是在它的上面，当你不是。删除缩放的div，一切正常。唯一的问题是我无法绕过扩展iframe，所以我需要修复。

有没有人遇到过这个问题？无论如何要解决它？

HTML：

<div id="scale"> 
    <span id="drop-1" class="drop"></span> 

    <span id="drag-1" class="drag"></span> 
</div>

的jQuery：

$("#drop-1").droppable({ 
    over: function() { 
    $(this).css({'opacity' : '.4'}); 
    }, 
    out: function() { 
    $(this).css({'opacity' : '1'}); 
    } 
}); 

$("#drag-1").draggable();

来源

2013-01-14 deadconversations

这是一个[已知问题]（http://bugs.jqueryui.com/ticket/6844） - [jQueryUI Draggable]（http://jqueryui.com/draggable/））在计算区域时不考虑CSS变换。他们不打算修复它。 –

可能重复的[jQuery的 - 可缩放的DIV]（http://stackoverflow.com/questions/8605439/jquery-draggable-div-with-zoom） –

如何如何编写自己的拖动ñ下降的实现。我与你的例子试了一下，得到了它与下面的实现工作：

$.fn.scaleDroppable = function(params, scaleFactor){ 
      var offset = $(this).offset(); 
      var bottom = offset.top + $(this).height() * scaleFactor; 
      var right = offset.left + $(this).width() * scaleFactor; 
      var element = this; 
      $(document).mousemove(function(e){ 
       if(typeof($(document).data("dragObject")) != "undefined"){ 
        if(e.pageX <= right && e.pageX >= offset.left && e.pageY <= bottom && e.pageY >= offset.top){ 
         //movein 
         if(typeof(params.over)=="function"){       
          params.over.call(element); 
          if(typeof($(document).data("dragObject").data("inElements")) == "undefined") 
           $(document).data("dragObject").data("inElements", []); 
           $(document).data("dragObject").data("inElements").push(element); 
         } 
        }else{ 
         //moveout 
         var objectIndex = ($(document).data("dragObject").data("inElements") || []).indexOf(element); 
         if(typeof(params.out)=="function" && objectIndex > -1){ 
          params.out.call(element); 
          $(document).data("dragObject").data("inElements").splice(objectIndex, 1); 
         } 
        } 
       } 
      }); 
     }; 

     $.fn.scaleDraggable = function(scaleFactor){ 
      $(this).mousedown(function(){ 
       $(document).data("dragObject", $(this)); 
       var moveObject = function(event){ 
        $(document).data("dragObject").offset({top: event.pageY - ($(document).data("dragObject").height() * scaleFactor/2), left: event.pageX -($(document).data("dragObject").innerWidth() * scaleFactor/2)}); 
       }; 
       $(document).mousemove(moveObject); 
       $(document).one('mouseup', function(){ 
        $(document).removeData("dragObject"); 
        $(document).unbind("mousemove", moveObject); 
       }); 
      }); 
     }; 


    $(document).ready(function(){ 

     $("#drop-1").scaleDroppable(
       { 
        over: function() { 
         $(this).css({'opacity' : '.4'}); 
        }, 
        out: function() { 
         $(this).css({'opacity' : '1'}); 
        } 
       },0.5 
     ); 

     $("#drag-1").scaleDraggable(0.5); 

    });

您可以在http://jsfiddle.net/VNwb8/
这当然检查所花费的比例因子作为参数。如果你想自动检索scaleFactor，你可以编写一个实现来自动获取它。一些想法你可以从 Get the scale value of an element?

来源

2014-03-28 14:13:16

我知道我有点晚，一年后的答案。但我希望这有助于某人 –

这里我怎么可以使用'drop：function'在droppable –

我不知道我是否得到你的权利。但是如果你想在drop上执行一个回调函数，你可以简单地将一个回调参数添加到scaleDraggable函数中，并在$（document）.one（'mouseup'，function（）{...}的最后执行它。 –

缩放后拖放错误的注册

回答

相关问题