3

我正在开发一个项目，用户必须将正确的项目拖放到技术图纸上。例如，主板：用户将获得 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();
4

1 回答 1

0

如何编写自己的拖放实现。我用您的示例进行了尝试，并使其与以下实现一起使用：

    $.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 作为参数。如果您想自动检索 scaleFactor，您可以编写一个实现来自动获取它。您可以从中获得一些想法获取元素的比例值？

于 2014-03-28T14:13:16.280 回答