预览照片后，如何将照片拖到另一个保管箱？

Question

我想做的是预览变得可拖动并移动到另一个保管箱

使img源“”移动（拖动）到另一个保管箱区域

<script>
function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    if (!file.type.startsWith('image/')){ continue }

    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

    const reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}```
</script>

图片预览后如何移动到另一个区域

Answer 1

使用Java脚本在div中显示名为“预览”的图像。并启用使用 jQuery draggable＆droppable 函数的功能将图像拖放到Drop Box容器中。

window.onload = function(){
	
	//For example put some image in array
	arrayfile = ['https://www.w3schools.com/html/pic_trulli.jpg', 'https://www.w3schools.com/html/img_girl.jpg'];
	handleFiles(arrayfile);
	function handleFiles(files) {
	  for (let i = 0; i < files.length; i++) {
		const file = files[i];
		var img = document.createElement("IMG");
		img.setAttribute("src",file);
		img.classList.add("child");
		img.setAttribute("width", "304");
		img.setAttribute("height", "228");
		img.setAttribute("alt", "image alt");
		img.setAttribute("width", "100");
        img.setAttribute("height", "100");
		//append the image in preview div
		document.getElementById('preview').appendChild(img); 
	  }
	}
	
	
	//Use the jquery draggable & droppable function
	$(".child").draggable({
		revert: true
	});

	//use container to drop the image
	$(".container").droppable({
    accept: '.child',
    drop: function(event, ui) {
	 ui.helper.data('dropped', true);
	 $(this).append($(ui.draggable));
    }

  });
  
}

.container{
border:1px solid grey;
    width: 250px; /*can be in percentage also.*/
    height: 250px;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    text-align:center;
	float:left;
	margin-left:20px;
	
}
.child {
    padding: 2px;
    border: 1px solid black;
    margin: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	
	<!-- Preview div---->
	<div id="preview" class="container" target="child1">
	</div>
		
	<!-- container to drop the Preview Image -->
    <div class="container">

    </div>