Question

I’ve tried a few different jQuery centering plugins but can’t seem to figure this out. Basically I have three DIVs positioned on top of each other like shown:

—– (DIV 1 – Draggable Element that also drags DIV 3)

——- (DIV 2 – Contains a Transparent Image – Stays Stationary)

——— (DIV 3 – Contains Image that Drags with DIV 1 but is also Resizable and can Rotate)

So basically DIV1 contains an image (move icon) that when dragged moves DIV3 and I need the icon in DIV1 to always be in the center of DIV3 regardless of where (3) is moved or resized or rotated. I would really appreciate any help, can’t seem to get anything to work properly.

Fiddle: http://jsfiddle.net/EBNDf/1/

Thanks,

Sean

                            <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

I just changed up the math a little bit to not depend on the original css positioning, and instead be completely dynamic and the actual element dimensions.

Check out the code below for a completely dynamic example of what I’m talking about. I’ve used $drag_overlay to “optimize” your selection, so the dom doesn’t do repetitive document.getElementByIds. Being that it’s a direct ID, the optimization won’t prove any incredible performance increases, but a little efficiency can go a long way 🙂 It does however have a more substantial effect on the $(‘.preview’) selector 🙂

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

Cheers!