Question

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

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

我将羊/狗放在衬衫上但是一旦掉落就会进入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>

Answer 1

我不确定你打算在这里做什么，但似乎你试图在你的droppable类中附加“ITEM”类的内容。我说过，因为这就是你的代码现在正在做的事情。

如果是这种情况，您应该在“item”类上添加“float：left”属性。这将从左侧开始将它们整齐地水平并排堆叠（您可能还希望在每个项目上放置一个小的右边距以防止它们的边缘相互接触）。如果新项目的大小小于可用的水平空间，它将向下包裹到您的droppable的左边缘。
如果您希望项目的“克隆”“保留在原地”，您可以使用“ui.position”属性来保存相对于droppable的位置。
如果您希望实际的拖动器“粘住”您的droppable，请删除以下行：
```
                    var dropElemId = ui.draggable.attr("id");
                    var dropElem = ui.draggable.html();


                    $(this).append(dropElem);
```
它已经完成了！您可能还想删除项目的可拖动属性，以“修复”衬衫内的物品。

希望有所帮助！ ; - ）

Answer 2

$(".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);
    }
});

Answer 3

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

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

Jquery拖放

3 个答案: