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在.dropbox

时应该引用.drop-box

div中的jQuery可放置中心图像

1 个答案: