I have a small app in which I need to drag smaller pictures into a main picture.
(我有一个小型应用程序，需要将较小的图片拖到主图片中。)
Since adding Node.js logic and running the app from localhost.(由于添加了Node.js逻辑并从本地主机运行应用程序。)
Images do drop, the function works however they disappear behind the bigger picture.(图像确实掉落，该功能有效，但是它们消失在较大的图像后面。)
main script:
(主要脚本：)
$( 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:
(的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>
I know that if I set the picture as a background picture for the div it will work, however since adding the backend the div refuses to show the background picture.
(我知道，如果将图片设置为div的背景图片，它将起作用，但是由于添加了后端，因此div拒绝显示背景图片。)
If I set the parent div as droppable, the drop function wont work.(如果我将父div设置为可放置，则放置功能将无法工作。)
ask by Dbtgrom translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
