Jquery 拖放

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

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

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

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

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

    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上的样式。它是否绝对定位，是否浮动等等？

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