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

退房下探后的DIV的风格。它绝对定位，是否浮动等？

此外，检查出类似的问题（加解决方案）我几个月前here on Stack Overflow。它谈到了一种不同的解决方案，将“丢弃”的元素“捕捉”到一个容器中。

Answer 2

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

1. 如果是这种情况，你应该在你的“item”类中放置一个“float：left”属性。这将从左边开始整齐地水平堆叠它们（您可能还想在每个项目上放一点右边缘以防止它们的边缘彼此接触）。如果新项目的尺寸小于可用的水平空间，它将包装到可拖放的左边缘。

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

3. 如果你想实际拖拽元素“粘”你可弃，删除这些行：

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

   它完成！您可能还想要移除物品的可拖动属性以“修复”衬衫内的物品。

希望帮助！ ;-)

Answer 3

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