как сделать перетаскиваемый элемент Jquery добавленным к отбрасываемому при удалении

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

Я пытаюсь добавить свой элемент draggable-clone к элементу droppable, когда он удаляется. когда элемент draggable находится внутри элемента droppable, я хочу, чтобы он (перетаскиваемый элемент) был перетаскиваемым внутри droppable. Прямо сейчас элемент draggable-clone можно перетаскивать из его положения, и когда он перетаскивается, он становится недоступным для перетаскивания. Поэтому, пожалуйста, помогите мне в достижении моей цели. Спасибо.

вот код:

$(function () {

    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});
.well {
    width: 150px;
    height: 150px;
    border: 3px solid red;
}
.ii{
  float:left;
  margin-top: 20px;
  margin-right: 20px;
  border: 3px solid blue;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<div class="well">
    <div id="draggable">CONTENT</div>
</div>
<div id="droppable1" class="ii well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="ii well col-md-9" style="z-index:-1;"></div>


jquery jquery-ui-draggable jquery-ui-droppable jquery-clone
person Axmed nuur    schedule 20.09.2016    source источник
comment
Возможный дубликат Перетащите сортируемое в сортируемое (вложенные элементы div)   -  person Dekel    schedule 20.09.2016

Ответы (1)


arrow_upward
1
arrow_downward

Исходный элемент создается как перетаскиваемый в событии готовности документа, но новый элемент, созданный при перетаскивании, никогда не запускает на нем этот код. Его нужно добавить в событие "drop":

$('#droppable1, #droppable2').droppable({
    drop: function (event, ui) {        
        $(this)
            .append(ui.helper.clone(false).css({
            position: 'relative',
            left: '0px',
            top: '0px'
        }));
        /* New stuff here: */
        $('.ui-draggable').draggable({
            helper: 'clone'
        });
    }
});
person Adam    schedule 20.09.2016
comment
Я хочу, чтобы окончательный клонированный элемент можно было перетаскивать в любую позицию в раскрывающемся списке, я не хочу, чтобы его можно было сортировать. - person Axmed nuur; 21.09.2016