не получается задать селекторы для draggable

[ИринаDfy]

есть 2 div'а- #block1 и #block2.
В #block1 находятся элементы -блоки красного цвета, при перетаскивании которых на #block2 срабатывает опция клонирования. Эти элементы становятся зелеными

$(function() {
   //
    $('#block1 .redBlock').draggable({
          helper:'clone'
    });

Задача такая: когда элемент находится в #block2, он тоже должен быть draggable, но создаваться еще 1 клон не должен

$('#block2').droppable({
        hoverClass: 'dropHere'
        ,drop: function(event, ui) {            
            $(this).append($('<div class="greenBlock">' + ui.draggable.html() + '</div>').draggable());            
        }
        ,over: function(event, ui) {
            console.log('over event');
        }
        
    });   
      
});

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

$('#block1 .textBlock').draggable({
//родительский элемент после перетаскивания получает id=ui-droppable
        if(this.parent.id != 'ui-droppable')
          helper:'clone'
    });

Но при вводе условия,вообще не работает код.


Потом пробовали изменить вторую часть кода, что-то вроде:

$('#block2' div).droppable({
        hoverClass: 'dropHere'
        ,drop: function(event, ui) {            
            $(this).append($('<div class="greenBlock">' + ui.draggable.html() + '</div>').draggable("option", "helper", 'original'));            
        }

Здесь пытаемся задать опцию.draggable("option", "helper", 'original'));
Тоже код не работает корректно:перетаскивается только по 1 квадрату и они остаются красными, т.е. <div class="greenBlock"> не прописывается.

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


Надеюсь, знатоки подскажут, где копать, а то уже сутки над проблемой бьюсь

[Rise]

ИринаDfy,

<style>
.block1 .textBlock { background: red; }
.block2 .textBlock { background: green; }
</style>

<div class="block1">
	<div class="textBlock">Текст 1</div>
	<div class="textBlock">Текст 2</div>
	<div class="textBlock">Текст 3</div>
</div>
<div class="block2"></div>

<script>
$('.block1 .textBlock').draggable({
	scope: 'vasya',
	helper:'clone'
});
$('.block2').droppable({
	scope: 'vasya',
	drop: function (event, ui) {
		ui.draggable.clone().draggable({
			containment: 'parent'
		}).appendTo(this);
	}
});
</script>

[рони]

ИринаDfy,
draggable droppable клонирование блоков

[Rise]

рони, можно клон с ui.helper сделать если надо сохранить позицию.

[рони]

Rise,
ок - да можно - когда-то мне в ui.helper нехватило каких-то свойств - поэтому делал сначала клон ui.draggable а позицию брал от ui.helper

[ИринаDfy]

Спасибо огромное за Ваши ответы, все помогло

[ИринаDfy]

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