JQuery UI перетащить эффект

Question

На одной панели у меня есть вызываемый ресурс, например, желтый квадрат

Я хочу перетащить элемент на другую панель и скопировать один, но оригинальный все еще там,

разметка проста:

   <div id="panel">
        <div id="square" class="square"></div>  //the resource
    </div>
    <div id="canvas">
    </div> 

код перетаскивания js:

$('#panel .square').draggable({
    appendTo: "#canvas",
    helper: "clone"
});

$('#canvas').droppable({
    drop: function (e, ui) {
        var $temp_id = $(ui.draggable).attr('id');
        var $new_id = $temp_id + "_01";
        $(ui.draggable).clone()
                        .css({ 'top': ui.offset.top, 'left': ui.offset.left })
                        .appendTo($(this))
                        .attr('id', $new_id);

        $('#'+$new_id+'').draggable();
    }
});

Я хочу, чтобы только элемент ресурса мог копировать себя, но тот, который находится на холсте, мог копировать себя тоже!Унаследуйте копию!

Спасибо

Вот Пример

Что я сделал? Почему это могло произойти? Как я могу отменить это?

Answer 1

Просто добавьте это в событие выпадения.

ui.draggable.remove();

Это удалит оригинальный элемент.

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

accept: function(d) {
        return $(this).find(d).length == 0
}

Что это делает; он проверяет ваш контейнер на предмет наличия d, если этот объект присутствует, код будет return false, поэтому предотвращает падение объекта, которое вызывает дублирование.

Надеюсь, это поможет.