Schaefchen: Position von zwei divs tauschen

SELF-Forum

Position von zwei divs tauschen

Schaefchen
– Informationen zu den Bewertungsregeln

Ich habe auf einer Seite verschiedene divs verteilt, die Hälfte davon leer, die andere gefüllt mit einem Wort in einem weiteren div.  Nun möchte ich mit jquery (damit es auch auf mobilen Geräten funktioniert) erreichen, dass man die Wörter durch die Gegend ziehen und in den leeren divs ablegen kann. Funktioniert auch ganz gut, aber ich will auch dafür sorgen, dass jeweils nur ein Wort in die divs geschoben werden können, also nicht zwei Wörter übereinander liegen. Auch muss ich Wörter wieder zurückverschieben und ein neues Wort in ein div schieben können. Hat jemand eine Idee, wie ich das umsetzen kann?

$ (init);  
function init() {  
        $(".dragzones").draggable({  
			start: handleDragStart,  
			cursor: 'move',  
			revert: "invalid",  
		});  
          $(".dropzones").droppable({  
                drop: handleDropEvent,  
				tolerance: "touch",  
        });  
};  
function handleDragStart (event, ui) {			}											  
function handleDropEvent (event, ui) {  
					$(this).droppable('disable');  
					 ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );  
  					 ui.draggable.draggable( 'option', 'revert', "invalid" );  
					 }

<body>  
<div id="alles">  
		<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>  
        <div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>  
        <div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>  
        <div class="dropzones" id="zone11"></div>  
        <div class="dropzones" id="zone12"></div>  
        <div class="dropzones" id="zone13"></div>  
</div>  
</body>
Beitrag melden
–
Informationen zu den Bewertungsregeln