javascript - div 内的 jQuery 可放置中心图像

Question

我试图将图像(可拖动对象)放在 div(放置对象)中，一旦它被删除，但由于某种原因，无论我做什么我都无法让它工作。我试过使用以前 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;
}

Answer 1

我想这就是你要问的。我把它做成一个黑色背景的 .drop-box 以便看到，在 .mouseleave 上将图像居中，在以下位置摆弄:http://jsfiddle.net/wfCw2/1/

此外，您的 javascript 在应该是 .drop-box 时引用了 .dropbox