Drag-and-drop operations on the front

<! DOCTYPEHTML> <HTMLlang="en"> < Head> <Metacharset="UTF-8"> <title>title</title> <style>#target{padding:20px; /*height:300px;*/Border:5px Dashed#c0c0c0; Color#e0e0e0; Font-size:40px; line-height:260px; Text-align:Center; -webkit-user-select:None; CursorPointer; } * * To provide a more humane style for dragging and dropping when adding * *#target.actived{border-color:#888; Color#eaeaea; box-shadow:0 0 80px#e0e0e0inset; }#result{font-size:14px; Color#555;
        line-height:1.5; }#resultli{Border-top:2px Solid#c0c0c0; }#img2{width:400px; } </style> </ Head> < Body> <Divclass="Container"> <Divclass="Page-header"> <H1>drag&drop</H1> </Div> <inputtype="Text"> <!--The following content is just dragging content--> <Divclass="Jumbotron"> <P> Hello, how old are you, haha, where am I today </P> <imgsrc="./images/googlelogo_color_272x92dp.png"alt=""> <imgsrc="./images/James 1.jpg"alt="" id="Img2"> </Div> <!--This div is dragged to the destination, file, picture, or text will be stored in the UL--> <Divid="Target"> Drag something into here <ulid="Result"class="List-group"> </ul> </Div> <BR> </Div> <Script>window. onload =function() {//target All dragged content dragged to targetvartarget =Document. getElementById (' target '); Result drag the area shown by the resultsvarresult =Document. getElementById (' Result '); Monitor drag and Drop event//drag drag//drop loosen, put down Target.addeventlistener (' DragEnter ',function() {//Console.log (' drag into '); This. Classlist.add (' actived ');

        }); Target.addeventlistener (' DragLeave ',function() {//Console.log ("Drag Away"); This. Classlist.remove (' actived ');

        }); If you are listening for drop events, you first need to block the default drag-and-drop event Target.addeventlistener (' DragOver ',function(e) {e.preventdefault ();
        }); Monitor drag and drop the released event Target.addeventlistener (' Drop ',function(e) {//Console.log (' loosen down '); Judge what the drag and drop is in the content//1. Text//2. Picture src//3. Document filevarFile = E.datatransfer.Files.length;varsrc = e.datatransfer.getdata (' Text/uri-list ');varText = E.datatransfer.getdata (' Text/plain ');if(file) {//dragging is one or more filesvarFiles = E.datatransfer.Files; Traverse each file for(vari = 0; I < files.length; i++) {varf = files[i];varLi =Document. createelement (' Li '); Li.InnerHTML="+f.name+"+f.size+"</p>"; Result.appendchild (LI); } }else if(SRC) {varIMG =Document. createelement (' img '); Text/url-list gets the URL of the image corresponding to the IMG.src= src;varLi =Document. createelement (' Li '); Li.appendchild (IMG); Result.appendchild (LI); }else if(text) {varLi =Document. createelement (' Li '); Li.innertext= text; Result.appendchild (LI); } e.preventdefault (); }); }; </Script> </ Body> </HTML>

drag and drop the look in the process

This is the contents of the UL inside after dragging and dragging inside