Question

我正在尝试通过jQuery将元素从另一个div拖放到div中。我要添加克隆，而不是我拖到可放置div的实际元素。

然后我将原始元素添加到了源div中。另外，我在克隆元素中添加了“克隆”类。

问题是当我将元素拖放到droppable div（实际上是一个克隆）中时，该元素被复制并添加到了droppable 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);
          }
    },

然后我发现我所指的“ this”没有正确更新，这时我很困惑。

我是菜鸟，我想不出解决办法。

这是笔：

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

“ this”不代表所选元素

1 个答案: