Как в jQuery сделать Drag and Drop прилепание к Droppable элементу?

Question

[ibesenok]

Народ помогите пожалуйста. Есть задача нужно сделать типо мозайки для детей, что бы они собирали из четырёх элементов одну картинку. Хочу сделать что бы к правильному дроппейбл элементу притягивался правильный кусочек картинки. Так картинки я повернул на 45 градусов с помощью CSS rotate нужно что бы при дропе на правильный элемент они становились в нужную позицию и сами поворачивались. Вот код :

<div class="mozaic">
				<div class="fragment droppable_first"></div>
				<div class="fragment droppable_second"></div>
				<div class="fragment droppable_third"></div>
				<div class="fragment droppable_four"></div>
			</div>

			<div class="fragments">
				<img src="img/mozaic_1.png" alt="" class="fragments_ask otvet_first makeMeDraggable">
				<img src="img/mozaic_2.png" alt="" class="fragments_ask otvet_second makeMeDraggable">
				<img src="img/mozaic_3.png" alt="" class="fragments_ask otvet_third makeMeDraggable">
				<img src="img/mozaic_4.png" alt="" class="fragments_ask otvet_four makeMeDraggable">
			</div>

И Скрипт :

<script type="text/javascript">
		 
		$( init );

		function init() {
		  $('.makeMeDraggable').draggable({
		  });
		$( ".droppable_first" ).droppable({
		    drop: function (e, ui) {
	        	switch(ui.draggable.attr('class')) {
		            case 'otvet_first':
		                revert: "invalid";
		                break;
		            default:;
	       		 }
    		}
		});

		}

	</script>

Заранее благодарю!

Answer 1

[creage]

Snap