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); 
    } 
});