Question

我有一个小型应用程序，需要将较小的图片拖到主图片中。由于添加了Node.js逻辑并从本地主机运行应用程序。图像确实掉落，该功能有效，但是它们消失在较大的图像后面。

主脚本：


$( document ).ready(function() {
    //fetch
     const fetchData = async() => { 
     const response = await fetch(' http://www.mocky.io/v2/59bd9a773c00001303529fe0');
     const data = await response.json();
    //  items = JSON.stringify(data);
     console.log(data);
     div = document.getElementById('userData');
     for (var i = 0; i < data.users.length; i++) {
         var str ='<div class="rounded" >'+data.users[i].user +' '+data.users[i].name +' </div>';
         str +='<img id="same-size" class="draggable" src="'+data.users[i].picture+'"></img>';
         div.insertAdjacentHTML( 'beforeend', str );

     }
     var x = null;

//Make element draggable
$(".draggable").draggable({

    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    stack: '.draggable',
    revert: "invalid"


});
$(".droppable").droppable({

           drop: function (e, ui) {
                console.log("eh");
                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                    ui.helper.remove();


               x.draggable({

                    containment: '.droppable"',
                    tolerance: 'fit',
                    stack: '.draggable'



                });

                x.resizable({

                  animate: true,


                  helper: "ui-resizable-helper",




                });

                x.appendTo('.droppable');

            }

            }
        });
     }

    fetchData();
    });

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dragger</title>

    <script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
    <script
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
    integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
    crossorigin="anonymous"></script>
    <link rel="FaviconIcon" href="favicon.ico" type="image/x-icon">


    <script src="fetchControl.js" href='/fetchControl.js' type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/main.css">






</head>
<body>
        <div class="" id="container">
                <div id="canvas" class="left-side droppable "><img id="positionSize"src="forest.jpeg"></img></div> 
                <div class="right-side"  id="userData"></div>   
              </div>

</body>
</html>

我知道，如果将图片设置为div的背景图片，它将起作用，但是由于添加了div，div拒绝显示背景图片。如果我将父div设置为可放置，则放置功能将无法正常工作。

拖放jQuery：拖放后图像消失

0 个答案: