Question

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

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

-------（DIV 2 - 包含透明图像 - 保持固定）

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

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

谢谢，

肖恩

                            <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

Answer 1

最后让它发挥作用，如果有人需要它，你可以在这里查看小提琴：http://jsfiddle.net/EBNDf/12/

也可以提供更好的建议。

Answer 2

我只是将数学改为一点，不依赖于原始的css定位，而是完全动态和实际的元素尺寸。

查看下面的代码，了解我正在谈论的内容的完整动态示例。我使用$ drag_overlay来“优化”你的选择，所以dom不会重复document.getElementByIds。由于它是一个直接的ID，优化不会证明任何令人难以置信的性能提升，但一点效率可以很长的路径:)但它确实对$（'。preview'）选择器有更大的影响：）< / p>

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   
});

干杯！

始终将Div元素放置在可调整大小和可拖动的第二个Div的中心

2 个答案: