0

我尝试了一些不同的 jQuery 居中插件，但似乎无法解决这个问题。基本上，我将三个 DIV 放置在彼此之上，如图所示：

-----（DIV 1 - 也拖动 DIV 3 的可拖动元素）

--------（DIV 2 - 包含透明图像 - 保持静止）

---------（DIV 3 - 包含使用 DIV 1 拖动但也可调整大小并可以旋转的图像）

所以基本上 DIV1 包含一个图像（移动图标），当拖动 DIV3 时，我需要 DIV1 中的图标始终位于 DIV3 的中心，无论 (3) 移动、调整大小或旋转的位置。我真的很感激任何帮助，似乎无法让任何东西正常工作。

小提琴：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

我只是稍微改变了数学，不依赖于原始的 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 回答
0

终于让它工作了，如果有人需要它，你可以在这里查看小提琴：http: //jsfiddle.net/EBNDf/12/

也愿意接受更好的建议。

于 2012-05-04T03:19:35.723 回答