在HTML5中使用JavaScript实现图像数组的拖放？
我想创建一个可以拖放到容器中的图像列表。 然后我想迭代图像列表并渲染它们。下面的代码仅适用于阵列之外的图像（在HTML5中使用JavaScript实现图像数组的拖放？,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我想创建一个可以拖放到容器中的图像列表。 然后我想迭代图像列表并渲染它们。下面的代码仅适用于阵列之外的图像（boxA）。如何实现这种设计，使阵列中的图像能够在容器中拖放（boxB） html，正文{ 左边距：自动； 右边距：自动； 宽度：980px； } #boxA{背景色：#6633FF；宽度：75px；高度：75px；} #箱B{ 浮动：对； 填充：10px； 利润率：10px； } #boxB{背景色：#FF6699；宽度：500px；高度：500px；} #洛洛{ 填充：10px； 宽
boxAboxB
html，正文{
左边距：自动；
右边距：自动；
宽度：980px；
}
#boxA{背景色：#6633FF；宽度：75px；高度：75px；}
#箱B{
浮动：对；
填充：10px；
利润率：10px；
}
#boxB{背景色：#FF6699；宽度：500px；高度：500px；}
#洛洛{
填充：10px；
宽度：800px；
列表样式：无；
浮动：左；
}
#洛洛乌尔{
显示：内联；
}
#洛洛乌利{
显示：内联；
}
功能dragStart（ev）{
ev.dataTransfer.effectAllowed='move'；
ev.dataTransfer.setData（“Text”，ev.target.getAttribute（“id”）；
ev.dataTransfer.SetDragage（ev.target，0,0）；
返回true；
}
功能疏水剂（ev）{
event.preventDefault（）；
返回true；
}
功能牵引器（ev）{
返回false；
}
功能拖动（ev）{
var src=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（src））；
ev.stopPropagation（）；
返回false；
}
var myArray=新数组；
myArray[0]=“”
myArray[1]=“”
myArray=ev.dataTransfer.getData（“文本”）；
函数lala（）{
对于（var i=0；i”+“”+myArray[i]+” “+””）；
}
}
拉拉（）；
myArray[0]='
myArray[1]='
…..
……
`您看过这个吗？可能会有帮助。。。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
margin-left:auto;
margin-right:auto;
width:980px;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB{
float:right;
padding:10px;
margin:10px;
}
#boxB { background-color: #FF6699; width:500px; height:500px; }
#lolo {
padding:10px;
width:800px;
list-style:none;
float:left;
}
#lolo ul{
display:inline;
}
#lolo ul li{
display:inline;
}
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
<-- this my array -->
var myArray = new Array;
myArray[0] = '<img src="image/pic1.png">'
myArray[1] = '<img src="image/pic2.png">'
myArray = ev.dataTransfer.getData("text");
function lala(){
for (var i=0; i < myArray.length; i++)
{
document.write("<ul>" + "<li>" + myArray[i] + "</li>" + "</ul>");
}
}</script>
</head>
<body>
<!-- this the HTML code -->
<div id="boxA" draggable="true"
ondragstart="return dragStart(event)">
</div>
<div id="lolo">
<script>
lala();
</script>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
</body>
</html>