не получается задать селекторы для draggable
есть 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"> не прописывается. Опять же, еще один непонятный момент с селекторами. Ведь если у меня в начал функции прописано Надеюсь, знатоки подскажут, где копать, а то уже сутки над проблемой бьюсь |
Ирина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 клонирование блоков |
рони, можно клон с ui.helper сделать ;) если надо сохранить позицию.
|
Rise,
ок - да можно - когда-то мне в ui.helper нехватило каких-то свойств - поэтому делал сначала клон ui.draggable а позицию брал от ui.helper |
Спасибо огромное за Ваши ответы, все помогло:dance:
|
у вас замечательный форум, на самом деле, вчера просто почитала и нашла много тем, где этот вопрос уже был решен
|
Часовой пояс GMT +3, время: 11:59. |