0

いくつかの異なるjQueryセンタリングプラグインを試しましたが、これを理解できないようです。基本的に、次のように3つのDIVを重ねて配置します。

-----（DIV 1-DIV3もドラッグするドラッグ可能な要素）

-------（DIV 2-透明な画像が含まれています-静止したままです）

---------（DIV 3-DIV 1でドラッグする画像が含まれていますが、サイズ変更も可能で、回転も可能です）

つまり、基本的にDIV1には画像（移動アイコン）が含まれているため、ドラッグするとDIV3が移動し、（3）の移動、サイズ変更、回転に関係なく、DIV1のアイコンを常にDIV3の中央に配置する必要があります。私は本当に助けていただければ幸いです、適切に動作するものを得ることができないようです。

フィドル： http： //jsfiddle.net/EBNDf/1/

ありがとう、

ショーン

                            <h1>Preview</h1>
                            <br>
                            <!-- Zoom Slider -->
                            <div id="zoomslider" style="float:left; width:55px; height:405px;">
                                    <div id="slider-vertical" style="height:100%; margin: auto auto;"></div>
                            </div>

                            <!--- Preview Container -->
                            <div id="previewcontainer" style="float:left; width:485px; height:405px;">

                                <div id="drag-overlay"></div>

                                <div id="background-overlay">
                                </div>  

                                    <!-- Loaded Face Image  -->
                                    <div id="loaded-image" class="preview ui-widget-content ui-draggable"></div>

                            </div>

                                <!-- Clear Fix -->
                                <div id="blank" style="float:left; width:55px; height:55px;"></div>

                            <!-- Rotate Slider -->
                            <div id="rotateslider" style="float:left; width:485px; height:55px;">
                                <br>
                                    <div id="slider" style="width:100%; margin: auto auto;"></div>
                            </div>                                  


                            <script>
                                //make resizable and rotate via slider
                                //make draggable
                                //get position of loaded-image
                                $("#drag-overlay").multiDraggable({ group: [$("#drag-overlay"),$(".preview") ]});

                                $("#slider-vertical").slider({
                                    orientation: "vertical",
                                    value: 50,
                                    max: 500,
                                    min: 100,
                                    slide: function(event, ui) {
                                        $( ".preview" ).width(ui.value);
                                        $( ".preview" ).height(ui.value);
                                 }
                                });

                                $("#slider").slider({
                                  min: 0, // degrees
                                  max: 360, // degrees
                                  slide: function(e, ui) {
                                    $('.preview').jangle(ui.value);
                                  },
                                  stop: function(e, ui) { // in case you out slide the slider
                                    $('.preview').jangle(ui.value);
                                  }
                                });

                                //center drag element onto loaded-image
4

2 に答える 2

0

ついにそれが機能するようになりました。誰かがそれを必要とする場合は、ここでフィドルを見ることができます：http: //jsfiddle.net/EBNDf/12/

より良い提案も受け付けています。

于 2012-05-04T03:19:35.723 に答える
0

元のcssの位置に依存せず、代わりに完全に動的で実際の要素の寸法になるように、数学を少し変更しました。

私が話していることの完全に動的な例については、以下のコードをチェックしてください。$ drag_overlayを使用して選択を「最適化」したので、domはdocument.getElementByIdsを繰り返し実行しません。これは直接IDであるため、最適化によってパフォーマンスが大幅に向上することは証明されませんが、少しの効率が大いに役立つ可能性があります:)ただし、$（'。preview'）セレクターにはより大きな影響があります:)

var $drag_overlay = $('#drag-overlay'),
    $preview = $('.preview');

$drag_overlay.css({
    top : $preview.height() / 2 - $drag_overlay.height() / 4,
    left : $preview.width() / 2 - $drag_overlay.width() / 4   
});

乾杯！

于 2012-05-04T03:59:25.810 に答える