JQuery drag and drop

Question

Привет Я новичок в jQuery и стараюсь работать над доказательством концепции. Я разместил здесь пример кода, и мое требование следующее.

У меня есть две осколки собаки/овцы, и я хочу бросить их на рубашку.

Я бросаю овцу/собаку на рубашку, но как только она падает, она переходит в левое положение дивы.

Я пытался делать $('[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

Я не уверен, что вы на самом деле собираетесь здесь делать, но, похоже, вы пытаетесь добавить содержимое классов «ITEM» внутри вашего класса droppable. Я сказал это, потому что это то, что ваш код действительно делает прямо сейчас.

1. Если это тот случай, вы должны поместить свойство «float: left» в свой класс «item». Это будет аккуратно складывать их горизонтально бок о бок, начиная слева (вы также можете поместить небольшое правое поле с каждым элементом, чтобы их края не касались друг друга). Если размер нового элемента меньше, чем доступное горизонтальное пространство, оно будет свернуто до левого края вашего droppable.

2. Если вы хотите, чтобы «клон» ваших предметов «оставался на месте», где вы их бросили, вы можете использовать свойство «ui.position», чтобы сохранить их положение относительно droppable.

3. Если вы хотите фактические draggables к "прилипнет" к вашей Droppable, удалите эти строки:

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