drag div создает больше divs

Question

Im пытается перетащить некоторые .draggable divs и опустить внутри .droppable divs.

У меня есть рабочий пример (http://jsfiddle.net/amrezfq1/), но у меня есть два вопроса:

первая проблема: Когда я перетащить .draggable Див и падение .droppable DIV, то .draggable ДИВ Dont остаться там, где я падаю, он всегда выравнивается слева от div. (Я думаю, что его из-за append(), но не знаю, как это исправить)

Вторая проблема: я хочу перетащить divs, которые я вставляю внутрь. droppable div, но когда я это делаю, каждый раз, когда я перетаскиваю div внутри .droppable, создается еще один .draggable div.

Можете ли вы помочь, чтобы это работало нормально?

JQuery:

$(function() { 
    $(".draggable").draggable({ 
     helper: 'clone', 
     revert: 'invalid' 
    }); 
    $(".droppable").droppable({ 
     drop:function(event,ui){ 
      var element=$(ui.draggable).clone(); 
      $(this).append(element); 
      $(element).draggable(); 
     } 
    }); 
}); 

Answer 1

Попробуйте это. После удаления элемента я добавил класс dragged. Это позволяет избежать последующего вызова события drop на том же элементе. Также извлекается смещение() отбрасываемого элемента, чтобы установить его положение.

UPDATE: Я изменил код, чтобы извлечь левое поле, используя разницу между ui.offset.left и $ (this) .offset(). Left. К сожалению, верхний край не извлекался с использованием той же логики. Поэтому я добавил свои собственные вычисления, чтобы определить их динамически.

var itemsCount = 0; 
var factor = 1.1; 

$(function() { 
    $(".draggable").draggable({ 
     helper: 'clone', 
     revert: 'invalid' 
    }); 
    $(".droppable").droppable({ 
     drop:function(event,ui){ 
      if(!$(ui.draggable).hasClass("dragged")){ 
       var element = $(ui.draggable).clone();     
       $(element).css({"left": ui.offset.left - $(this).offset().left}); 
       if(itemsCount > 0) 
       { 
       var adjustedHeight = ($('.ui-draggable').css("height").replace("px","") * itemsCount * factor); 
       $(element).css({"top" : ui.offset.top - ($(this).offset().top + adjustedHeight)}); 
       } 
       $(element).addClass("dragged"); 
       $(element).draggable(); 
       $(this).append(element); 
       itemsCount++; 
      } 
     } 
    }); 
}); 

Пример: http://jsfiddle.net/amrezfq1/3/

Answer 2

Причина, почему положение выключено потому, что вы клонированием перетаскиваемым, в то время как элемент, который вы на самом деле позиционируется является помощником. Вы можете исправить это, клонируя помощника вместо фактического перетаскивания.

Чтобы устранить проблему дублирующий, вы можете использовать accept вариант Droppable, чтобы убедиться, что принятый перетаскиваемым уже не внутри Droppable, как показано ниже:

$(function() { 
 
    $(".draggable").draggable({ 
 
    helper: 'clone', 
 
    revert: 'invalid' 
 
    }); 
 
    $(".droppable").droppable({ 
 
    accept: ':not(.droppable > .draggable)', 
 
    drop: function(event, ui) { 
 
     var element = ui.helper.clone(); 
 
     $(this).append(element); 
 
     $(element).draggable({ 
 
     containment: this 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div class="draggable">draggabel</div> 
 
<div class="droppable">droppable</div>