¿Cómo podemos establecer la posición correcta de soltar el elemento html con jQuery?

Estoy usando jquery-UI para crear la interfaz de usuario web de arrastrar y soltar, pero estoy enfrentando algunos problemas durante la implementación de esto. Estoy compartiendo mi código, que es un prototipo y un ejemplo simple de mi implementación.

En mi ejemplo, hay tres elementos div: arrastrarme , soltar aquí y hacer que pueda arrastrarme .

Ahora explico que es eso. En realidad, quiero arrastrar el elemento y soltarlo en el contenedor, pero cuando lo coloco en un contenedor que no está colocando donde quiero en la primera vez, ese es el primer problema. Eso viene cuando establezco la posición del contenedor relativa porque quiero que el 0 superior quede a la izquierda.

Segundo problema con hacerme arrastrable div . Supongamos que solté varios elementos arrastrarme div dentro del contenedor y luego guardo esto (en este ejemplo, no tengo la opción de guardar), luego se va a editar, por lo que estos elementos guardados no se pueden arrastrar en este momento, pero tienen la misma clase si ve el código. Pero no sé cómo hago estos arrastrables.

Por lo tanto, tengo dos problemas con jquery-UI. Si alguien tiene alguna solución y tengo experiencia en jquery-UI, ayúdeme.

Ver mi código html:

.drag { text-align: center; margin-top:5px; width: 100px; height:100px; color:white; background-color: red; margin-bottom: 5px; border: 1px solid black; } .container { text-align: center; width: 400px; margin-top:5px; margin-left: 5%; height: 400px; color:white; background-color: green; border:1px solid black; } .dropped { text-align: center; width: 100px; height:100px; color:white; background-color: red; border: 1px solid black; } body { display: flex; } 
Drag me
drop here !!
Make me draggable

Jquery UI:

  $(document).ready(function() { $('.drag').draggable({ helper: "clone", appendTo:"body", revert: "invalid" }); $('.container').droppable({ accept: ".drag", drop: function(e, u) { var a = u.helper.clone(); a.css("z-index", 1000); a.appendTo(".container"); console.log("INFO: Accepted: ", a.attr("class")); a.attr('class', 'dropped').draggable({ containment: ".container" }); } }); });