JQuery Drag & Drop-Positionierungsprobleme

Ich habe Probleme mit Drag & Drop-Funktionalität und ich hoffe, dass jemand helfen kann. Die Regeln in Kürze sind:

1. Die "Stufe" (.stage), von der es mehrere geben kann, kann geklontes .pageControl akzeptieren. Es ist die einzige Klasse, die es akzeptieren kann.

2. Einmal auf der Bühne abgelegt, wird .pageControl zu .pageControlDropped und kann geklontes .wfcControl akzeptieren. Es ist die einzige Klasse, die es akzeptieren kann.

3. Sobald .wfcControl gelöscht wurde, wird es durch neues HTML ersetzt und wird .wfcControlDropped.

Meine Probleme sind:

1. Wenn ich geklontes .pageControl auf ".stage" ziehe, springt es auf eine Position auf der Bühne, die nicht die Position ist, an der ich es ablege. Ich kann es dorthin zurückziehen, wo ich es möchte, aber es muss dort fallen, wo ich es ablege. Ich habe versucht, CSS-Positionierung, aber es scheint zu funktionieren mit .pageControl. Einmal .pageControl - & gt; .pageControlDropped springt an eine andere Position. Außerdem ist es kein sehr flüssiger Widerstand wie in den Beispielen

2. Wenn ich mehrere .pageControls auf .stage lege, sollten einige von ihnen .wfcControl akzeptieren. Aber es scheint, als ob nur das erste .pageControl (jetzt .pageControlDropped) es empfängt. Ich kann das zweite .pageControlDropped nicht bekommen, um es zu empfangen.

3. Wie bekomme ich sukzessive .pageControl, um bestehende auf der Bühne nicht zu überlagern?

CSS:

JQuery:

Schließlich der HTML:

Danke für jede Hilfe zu diesem Thema.