3

ユーザーが正しいアイテムを技術図面にドラッグ アンド ドロップする必要があるプロジェクトに取り組んでいます。たとえば、マザーボード: ユーザーは CPU または DDR メモリの写真を取得し、その CPU をソケットにドラッグし、メモリを対応するスロットにドラッグする必要があります。

それはうまく機能しており、iFrame 内の Web サイトに読み込まれます。この Web サイトはレスポンシブであるため、ドラッグ アンド ドロップ アプリもサイズ変更する必要があります。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 に答える