如何修复：未显示拖动的元素

Question

我是 Jquery 的新手，我的代码有一些问题。我的程序下面有一个容器和一个小菜单。我有一些 img 元素 class 可以拖到我的容器中并四处移动。我想将其他一些 img 元素 class cap 放入我拖动的 piece 项目中，但是当我将 cap 放在该 piece 上时，它没有显示出来。当我看到控制台日志时，我可以看到该元素有一个子元素，但我看不到它。你认为我的问题是什么？

var x = null;
$( function () {
    $(".piece").draggable({
        cancel: "a.ui-icon", 
        revert: "invalid", 
        helper: 'clone',
        containment: '#container',
    });
    $(".piece").droppable({
       accept: ".cap",
       drop: function( event, ui ) {
         x= ui.helper.clone();
         x.appendTo(this);
         }
    });
    $(".cap").draggable({
        cancel: "a.ui-icon",
        helper: 'clone',
        containment: '#container',   
    });
    $("#container").droppable(
        {
       accept : ".piece",
       drop : function(event, ui)
        {
        x = ui.helper.clone();
        x.css("width", 200);
        x.css("height", 200);                
        x.draggable({
            containment: '#container',
            cursor: 'move',
        });
        x.appendTo(this);
        x.droppable({
            accept: ".cap",
            drop: function( event, ui ) {
                x= ui.helper.clone();
                x.css("width", 200);
                x.css("height", 200);
                alert(' was dropped onto me!' ); 
                x.appendTo(this);
                console.log("this");
                console.log(this);
            }
        });
        ui.helper.remove();      
        }  
    });

});

我希望输出是作品上方的上限，但上限并未显示在作品上方。您可以在 https://jsfiddle.net/littletrives/6ktub3a9/

处查看 fiddle

Answer 1

正如您所注意到的，您的代码正确地将 cap 放置在 piece 中。

问题是<img>元素不能包含元素（来源：img specification, content model nothing specification）。因为你的cap<img>在piece<img>里面，所以不显示。

一个解决方案是添加 <div> 和 piece 的 src 作为 background-image 而不是将其添加为 <img> 标签.这样，您可以在其中添加 cap <img>。

我用一个小例子对你的 jsfiddle 做了一个分支：https://jsfiddle.net/tp7e2no1/1/

如何修复：未显示拖动的元素

How to fix: Dragged element not shown

javascript

jquery

jquery-ui