Всегда размещайте элемент Div в центре второго Div, размер которого можно изменять и перетаскивать

Я пробовал несколько разных плагинов для центрирования jQuery, но не могу понять этого. В основном у меня есть три DIV, расположенных друг над другом, как показано:

----- (DIV 1 - Draggable Element, который также перетаскивает DIV 3)

------- (РАЗДЕЛ 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

html jquery centering draggable resizable
person Sean    schedule 03.05.2012    source источник
comment
Я пытаюсь понять ваш вопрос, может быть, jsfiddle поможет?   -  person Jeff Hines    schedule 03.05.2012
comment
Привет, Джефф, спасибо за уделенное время. jsfiddle.net/EBNDf/1 Итак, я хочу поместить значок курсора посередине загруженного -image div.   -  person Sean    schedule 04.05.2012
comment
Я мало что знаю о mootools, но вы должны иметь возможность позиционировать элемент после перетаскивания поля с помощью какого-то обратного вызова ... Ваша скрипка говорит mootools, но вы используете jQuery? Я не могу найти документацию по multiDraggable   -  person Jeff Hines    schedule 04.05.2012
comment
Скрипка Джеффа случайно выбрала mootools, в ресурсах был использован jQuery. Спасибо за вашу помощь, думаю, у меня все заработало.   -  person Sean    schedule 04.05.2012

Ответы (2)


arrow_upward
0
arrow_downward

Я просто немного изменил математику, чтобы не зависеть от исходного позиционирования css, а вместо этого быть полностью динамичным и фактическими размерами элемента.

Ознакомьтесь с приведенным ниже кодом, чтобы увидеть полностью динамический пример того, о чем я говорю. Я использовал $ drag_overlay, чтобы «оптимизировать» ваш выбор, поэтому dom не выполняет повторяющихся document.getElementByIds. Поскольку это прямой идентификатор, оптимизация не приведет к невероятному увеличению производительности, но небольшая эффективность может иметь большое значение :) Однако она оказывает более существенное влияние на селектор $ ('. 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   
});

Ваше здоровье!

person Bryan    schedule 04.05.2012

arrow_upward
0
arrow_downward

Наконец-то он заработал, если кому-то это нужно, вы можете просмотреть скрипку здесь: http://jsfiddle.net/EBNDf/12/

Также открыты для лучших предложений.

person Sean    schedule 04.05.2012