Home > Developer > JavaScript
Drag and drop a webpage image:
Content of H5:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Drag and drop</title> <style> . Box{ width: px; height: px; }#box1{ background-color: Gray; } </style> <script src="App.js"></script></head><body> <div id="Box1" class="box"></div> <img id="img1" src= "1.png" width="200px" Height="200px"> <div id="msg"></div></body></html>JS file content:
varBox1div,msgdiv,img1;window.onload = function(){ //Get blockBox1div = document.getElementById ("Box1"); Msgdiv = document.getElementById ("MSG"); IMG1 = document.getElementById ("IMG1");3 //box1div.ondragenter = function (e) { //Showobj (e); //}Box1div.ondragover = function(e){E.preventdefault (); } Img1.ondragstart = function(e){E.datatransfer.setdata ("Imgid","IMG1"); }//After removing the data, place it on the point to be displayedBOX1DIV.ONDRP = function(e){Showobj (E.datatransfer); E.preventdefault ();//Create a new node varimg = document.getElementById (E.datatransfer.getdata ("Imgid")); Box1div.appendchild (IMG); }}//Print drag event details function showobj(obj){ vars =""; for(varKinchobj) {s+=k+":"+obj[k]+"<br/>"} msgdiv.innerhtml = S;}Drag local files to the Web:
H5 file:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Local drag and drop</title> <style> #imgContainer{ background-color: red; width:px; height: px; } </style> <script src="App1.js"></script></head><body> <div id="Imgcontainer"></div> <div id="msg"></div></body></html>JS file:
varImgcontainer,msgdiv;window.onload = function(){Imgcontainer = document.getElementById ("Imgcontainer"); Msgdiv = document.getElementById ("MSG"); Imgcontainer.ondragover = function(e){E.preventdefault (); } Imgcontainer.ondrop = function(e){E.preventdefault ();//showobj (e); varf = e.datatransfer.files[0];varFileReader =NewFileReader (); Filereader.onload = function(e){Showobj (e); imgcontainer.innerhtml ="+filereader.result+"\" > "} filereader.readasdataurl (f); }} function showobj(obj){ vars =""; for(varKinchobj) {s+=k+":"+obj[k]+"<br/>"} msgdiv.innerhtml = S;}JavaScript--The use of Drop,drag
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
