Drag und Drop mit JQuery

t90

Grünschnabel
Hallo,

ich versuche gerade was mit JQuery zu erstellen und habe da ein Problem.

Ich habe eine Dropzone in der mehrere Dragelemente liegen und mehrere Dropzonen in denen jeweils ein Dragelement liegen darf.
Diese funktioniert soweit auch, jetzt möchte ich aber das jedes Dragelement in genau eine Dropzone verschoben werden muss. Ich habe jedem Element und jeder Zone eine ID gegeben, es sollte also nur überprüft werden ob die ID des Elements zur ID der Zone passt. Leider kenne ich mich kaum mit JQuery und JavaScrips aus und weiß deshalb nicht genau wie ich das umsetzen soll.

Das ist mein Code für die Drag Elemente:
Code:
$('.drag').draggable({
    				revert: 'invalid',
    				stop: function() {
        				$(this).draggable('option', 'revert', 'invalid');
    				}
				});

Und das für die kleinen Dropzonen, für die eine große ist er identisch, nur mit einer anderen class.
Code:
$('.drop').droppable({
    				drop: function(event, ui) {
        				var $this = $(this);
 
        				if ($this.find('.drag').length >= 1) {
            				ui.draggable.draggable('option', 'revert', true);
            				return;

        				ui.draggable.appendTo($this).css({
            				top: '0px',
            				left: '0px'
        				});
    				}
				});

Ich dachte ich können erstmal überprüfen ob die Dropzone ein Element entält und dann prüfen ob die ID passt, aber nichtmal das mit dem einen Element funktioniert:
Code:
if ($(this).find('#t1').length == 1) {}
t1 ist die ID der einen Dropzone, irgendwie wird die Abfrage aber nie true.

Wäre super wenn mir jemand helfen könnte.
 
Ich habe noch nicht ganz gerafft, was Du machen möchtest aber fürs erste würde ich bei der Abfrage size nehmen und nicht length

Code:
if ($(this).find('#t1').size() == 1) {}


Ich guck mir das gleich nochmal genauer an, vielleicht kann sogar ich Dir helfen ;)

Sorry, bin gerade durchn Wind. Aber auf die ID kannst Du per .attr("ID") zugreifen. Ich würde es aber mit Klassen machen. Dann nimmst Du die .hasClass("deineKlasse") Funktion. Die gibt true oder false zurück. Dann gibste allen, die da reindürfen die Klasse für die Dropzone. Wenn die in mehrere Dropzones dürfen gibst Du denen einfach alle Klassen von entsprechenden Dropzones.

Mein Gott, meine Artikulation schon wieder
 
Zuletzt bearbeitet:
Mit .attr("ID") funktioniert alles wie es soll, danke. :)

Habe jetzt aber noch eine andere Frage, ich habe mehrere input radio Gruppen und möchte aus allen Gruppen die gewählte id auslesen, dies funktioniert ja mit folgender Funktion: $("input[@name='abc']:checked").attr('id'). Mein Problem ist jetzt aber das ja jede radio Gruppe einen anderen Name hat und ich deshalb in der Funktion abc anpassen muss, also dort soll statt dem festen Wert eine Variable rein, leider funktioniert dies nicht.
Wodran liegt das und was kann ich alternativ tun?
 
Mit den zusätzlichen Anführungszeichen und den Plus geht es, vielen Dank.
Hatte alles mögliche probiert da eine Variable reinzubekommen, nur auf das Plus bin ich nicht gekommen. :)
 
Zurück