JavaScript DIV's bei DRAG nicht überlappen

[InsaYn]

Hallo Community,

ich habe folgendes Problem, und komme bei google leider auch nicht weiter.

Ich habe eine Dropzone in der sich bereits mehrere DIV-Container befinden die ich im Raster hin und her schieben kann. Doch nun möchte ich, dass ich die DIV's nur aneinander legen kann, nicht aber übereinander.

Hier mal mein Ansatz:

<div id="dropbox">
   <div class="verschieben"></div>
   <div class="verschieben"></div>
   <div class="verschieben"></div>
   <div class="verschieben"></div>
</div>

	$('.verschieben').draggable({
		drag: function(event, ui) {
			$( ".verschieben" ).draggable({ 
				containment: "#dropbox",
				cursor: 'move',
				grid: [raster,raster],
				delay: 100,
				revert: false }); 
			}
		});
	
    $('.verschieben').droppable({
        drop: function(event, ui) {
            $( ".verschieben" ).draggable({ revert: true, revertDuration: 0 });
        }
    });

Ist etwas verwirrend, funktioniert auch so in etwa.
Leider nur dann wenn die DIV's exakt übereinander gelegt werden, wird der gewählte DIV zurück gelegt.

Über Ideen würde ich mich freuen. Danke

 

[failormooNN]

Hi,

gibt es eine Live-Vorschau?

 

[nazdun]

Dropable hat eine Standardtoleranz von 50% - deshalb funktioniert es bei dir wahrscheinlich nur wenn sie exakt übereinander liegen. Wenn du für das droppable tolerance auf touch setzt wird es immer zurück gesetzt sobald sie überlappen. (JsFiddle)

 

[fz21z]

Wie wäre es mit einem Raster entsprechenden der eigentlichen Größe der Div Container. Dann könntest du beim Mouseover über einen Container des Rasters, das Div droppen.

 

[InsaYn]

Danke nazdun, genau so sollte das funktionieren.

Leider gehen sie nun auch in ihre Ursprungsposition zurück wenn sie exakt nebeneinander gelegt werden.... :-(

Ergänzung (16. August 2016)

Hat keiner eine Idee für mich???