«это» не относится к выбранному элементу

Question

Я пытаюсь перетащить элементы в div из другого div через jQuery. Я добавляю клон, но не фактический элемент, который я перетаскивал в div.

Затем я добавил исходный элемент, который я перетащил в источник div. Кроме того, я добавил класс «клон» к элементу клона.

Проблема в том, что, когда я перетаскиваю элемент в элемент сбрасываемого элемента div (который на самом деле является клоном), этот элемент копируется и добавляется в элемент сбрасываемого элемента div, но в неправильной позиции.

$("#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);
          }
    },

Затем я обнаружил, что «это», о котором я говорил, не обновляется правильно, и я очень запутался в этом моменте.

Я нуб и не могу придумать решение.

Вот ручка:

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

Answer 1

Проблема с вашим кодом состоит в том, что ваш $ (this) указывает на div id = "box" , а не на отдельный клонированный div или изображения. поэтому $ (this) никогда не будет иметь класс с именем clone.

Здесь, решено, заменить это в вашем коде, проблема исправлена.

   $("#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");
        }
    });