javascript - 如何修复: Dragged element not shown

Question

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

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

});

我希望输出是零件上的盖子，但盖子没有显示在零件上。您可以在以下位置看到 fiddle :https://jsfiddle.net/littletrives/6ktub3a9/

Answer 1

您的代码正在放置 cap里面piece正如您所注意到的，正确无误。

问题是 <img>元素不能包含元素(来源: img specification 、 content model nothing specification )。因为你的cap <img>位于 piece 的内部<img> ，则不显示。

解决方案可能是添加 <div>与 src piece的作为background-image而不是将其添加为 <img>标签。这样，您可以添加 cap <img>里面。

我用一个小例子对你的 jsfiddle 进行了 fork : https://jsfiddle.net/tp7e2no1/1/