javascript - "this" not reffering to the selected element

I am trying to drag and drop elements to a div from another div through jQuery. I am adding the clone but not the actual element I have dragged to the droppable div.

I have then added the original element which I have dragged to the source div. Also, I have added the class "clone" to the clone element.

The problem is when I drag and drop the element in the droppable div(which is actually a clone), the element is copied and added to the droppable div but at the wrong position.

$("#drop").droppable({ accept: ".draggable", 
    drop: function(event, ui) {
          var droppable = $(this);

          console.log("drop");
          $(this).removeClass("border").removeClass("over");
          var dropped = ui.draggable;
          var droppedOn = $(this);

          console.log($(this).attr('class'));

          if(!($(this).hasClass("clone"))) {
                console.log("no clone");
                $(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");    

                var clone = dropped.clone().addClass("clone");
                clone.appendTo(droppedOn);
          }
    },

I then found out that the "this" I was referring to is not updating correctly and I am very confused at this point.

I am a noob and I can't think of the solution.

Here is the pen:

https://codepen.io/ishankgupta95/pen/rZyOYb

Answer

The problem with your code is that your $(this) is pointing your div id="box" rather than the individual cloned div or images. so $(this) will never have a class named clone.

Here, solved it replace this in your code, Issue is fixed.

   $("#drop").droppable({ accept: ".draggable",
        drop: function(event, ui) {

            var check = 0;
            // $( "#test" ).droppable( "dragstart", function( event, ui ) {check = 1;} );

            var x = event.clientX, y = event.clientY,
            elementMouseIsOver = document.elementFromPoint(x, y);
            var droppable = $(this);
            console.log("drop");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);


            console.log($(this).attr('class'));

            if(!elementMouseIsOver.classList.contains("clone")) {
                console.log("no clone");
                $(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
                // dropped.clone().appendTo(droppedOn);
                var clone = dropped.clone().addClass("clone");
                clone[0].id = 'test';
                clone.appendTo(droppedOn);

            }
        },
        over: function(event, elem) {
            $(this).addClass("over");
            console.log("over");
        },
        out: function(event, elem) {
            $(this).removeClass("over");
        }
    });