1

嗨，我是 jQuery 新手，正在尝试进行概念验证。我在这里发布了示例代码，我的要求如下。

我有 2 只 droppables 狗/羊，我想把它们放在衬衫上。

我将羊/狗放在衬衫上，但一旦放下它就会进入 div 的左下位置。

我试着做$('[id$="apparel"]').append(dropElem);而不是$(this).append(dropElem);

有人可以帮我吗？

这是我的 javascript

$(".items").draggable({helper: 'clone'});
$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
        var dropElemId = ui.draggable.attr("id");
        var dropElem = ui.draggable.html();
        $(this).append(dropElem);
        alert("drop done");
    }
});

和 HTML

<div class="wrap">
    <div class="sourcearea">
        <span class="items" id="itemsheep">
            <img src="sheep.jpg" width="100">
        </span>
        <span class="items" id="itemdog">
            <img src="dog.jpg" width="100">
        </span>
    </div>
    <div class ="droparea">
        <img src="RedShirt.jpg" width="300" height="300" id="apparel">
    </div>
</div>
4

3 回答 3

1 
$(".items").draggable({helper:'clone'});

$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
       var ele = ui.draggable.eq(0);
       //position element where helper was dropped
       ele.css("position", "absolute");
       ele.css("top", ui.absolutePosition.top);
       ele.css("left", ui.absolutePosition.left);
       //comment next line out if items shouldn't be restricted to redshirt
       ele.draggable('option', 'containment', this);
       //comment previous line out and next in if items shouldn't be draggable anymore
       //ele.draggable('destroy');
       $(this).append(ele);
    }
});
于 2009-12-16T14:12:59.513 回答
1

我不确定您在这里真正打算做什么，但似乎您正试图将“ITEM”类的内容附加到可放置类中。我这么说是因为这就是你的代码现在实际上正在做的事情。

  1. 如果是这种情况，你应该在你的“item”类上放置一个“float:left”属性。这将从左侧开始整齐地并排水平堆叠它们（您可能还希望在每个项目上放置一点右边距以防止它们的边缘相互接触）。如果新项目的大小小于可用的水平空间，它将向下包裹到可放置对象的左边缘。

  2. 如果您希望项目的“克隆”在您放置它们的位置“保持原位”，您可以使用“ui.position”属性来保存它们相对于可放置对象的位置。

  3. 如果您希望实际的可拖动对象“粘”到您的可放置对象，请删除以下行：

                        var dropElemId = ui.draggable.attr("id");
                    var dropElem = ui.draggable.html();


                    $(this).append(dropElem);

    它已经完成了！您可能还想删除项目的可拖动属性以“修复”衬衫内的项目。

希望有帮助！;-)

于 2009-12-16T13:28:48.750 回答
0

删除后查看 DIV 上的样式。它是绝对定位的，它是浮动的，等等？

另外，请查看几个月前我在 Stack Overflow 上遇到的类似问题（加上解决方案） 。它讨论了将放置的元素“捕捉”到容器的不同解决方案。

于 2009-12-16T12:48:27.873 回答