jQuery выпадающее центральное изображение внутри div

Question

jQuery выпадающее центральное изображение внутри div

0

Я пытаюсь центрировать изображение (объект перетаскивания) внутри div (объект drop) после его удаления, но по какой-то причине я не могу заставить его работать независимо от того, что я делаю. Я пробовал использовать различные фрагменты кода из предыдущих сообщений SO, но ни один из них не работает.

У меня есть сценарии jQuery и jQuery UI в верхней части страницы, а приведенный ниже Javascript также находится в верхней части страницы.

Изменение: я использую AngularJS для перетаскивания.

Текущий код, который я использую, приведен ниже.

HTML

ДРЕНАЖНЫЙ ОБЪЕКТ

<div class="drop-box" jqyoui-droppable data-drop="true" data-jqyoui-options="{revert: 'invalid'}">
</div>

<div class="drop-box" jqyoui-droppable data-drop="true" data-jqyoui-options="{revert: 'invalid'}">
</div>

УДАЛЕННЫЙ ОБЪЕКТ

<div class="merch-item">
    <div class="merch-item-outer">
        <div class="merch-item-inner" jqyoui-droppable data-drop="true" data-drag="false" data-jqyoui-options="{revert: 'invalid'}">
         <img src="/assets/banner.jpg" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{animate:true}">
        </div>
    </div>
</div>

Javascript

''$(document).ready(function () {
        $(".merch-item img").draggable({
            snap: ".dropbox",
            snapMode: "inner"
        }).mousedown(function () {
            var targets = $(".dropbox .test");
            targets.height(this.offsetHeight);
            targets.width(this.offsetWidth);
            targets.each(function () {
                $(this).position({ of: this.parentNode });
            });
        });
    });''

CSS

.merch-item-outer {
    padding: 10%;
    background-color: #f4f4f4;
}
.merch-item-inner {
    position: relative;
    z-index: 5;
}
.merch-item-inner img {
    width: 100%;
}
.merch-item-inner img:hover {
    background-color: #cccccc;
}
.drop-box {
    background-color: #f4f4f4;
    min-height: 250px;
    min-width: 250px;
}

Nikki Mather 28 апр. 2014, в 16:01

Источник

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Reeve · Answer 1 · 2014-04-28T11-59-00.000Z

Я думаю, это то, о чем вы просите. Я сделал это как один .drop-box с черным фоном, чтобы видеть, что на .mouseleave центрирует изображение внутри него, скрипку по адресу: http://jsfiddle.net/wfCw2/1/

Кроме того, ваш javascript ссылался на .dropbox когда он должен был быть .drop-box

Это почти хорошо. У меня есть несколько выпадающих окон, в которые можно переместить перетаскиваемый объект, поэтому мне нужно, чтобы он привязывался к тому, в котором он «помещен» - плюс мне нужно, чтобы он центрировался не на mouseLeave, а после того, как пользователь отпустил перетаскиваемый объект. объект. Редактировать: я поместил код, который вы добавили за пределами MouseLave. Это почти там, мне просто нужно центрировать изображение внутри div (независимо от высоты или ширины div, в который я его помещаю).
Разве это не то, что вам нужно? stackoverflow.com/a/11440368/3317085