div内的jQuery可放置中心图像

Question

我试图将图像（可拖动对象）放置在 div（放置对象）中，但由于某种原因，无论我做什么，我都无法让它工作。我尝试过使用之前 SO 帖子中的各种 sn-ps 代码，但似乎都不起作用。

我在页面顶部有 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 引用了 .dropbox，而它应该是 .drop-box