HTML5 Drag and Drop Feature

By -
Code Snippet  for Drag and Drop Image
<!DOCTYPE html>
<html>
<title></title>
<!--Internal CSS To declare box out line-->
<style>
.box,.box2{
      width:300px;
      height:300px;
  border:solid 2px red;
  } 
   .box2{
                margin-top: 5px;
            }
</style>
<!--declaration ends-->
<h1></h1>
<body>
<!--delcaring box1 class-->
<div class="box" >
<!-- image to be dragged-->
<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem"> </div>
<div class="box2" id="targetbox"></div>
<!--box2 declared to received dragged image from box1-->
</form>
<script>
document.getElementById("imagedragitem").ondragstart=function(e){
console.log(e);
console.log("calling on drop");
let data='<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem">';
e.dataTransfer.setData("text",data);
}
 <!--ondrop event is --> dragged item (element or text selection) is dragged.t-->
document.getElementById("targetbox").ondrop=function(e){
console.log(e);
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
this.innerHTML=fetchedData;
}
<!--ondragenter event is --> a dragged item enters a valid drop target-->
document.getElementById("targetbox").ondragenter=function(e){
console.log("calling on drage enter");
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
e.preventDefault();
  document.querySelector(".box").innerHTML="";

 }
<!--ondragover event is --> a dragged item is being dragged over a valid drop target, every few hundred milliseconds.-->
document.getElementById("targetbox").ondragover=function(e){
                console.log("dragover");
                e.preventDefault();
             
            }
</script>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------
Above code can be further improvised for reusability
--------------------------------------------------------------------------------------------------------------------


<!DOCTYPE html>
<html>
<title></title>
<!--Internal CSS To declare box out line-->
<style>
.box,.box2{
      width:300px;
      height:300px;
  border:solid 2px red;
  }   
   .box2{
                margin-top: 5px;
            }
</style>
<!--declaration ends-->  
<h1></h1>
<body>
<!--delcaring box1 class-->  
<div class="box" >
<!-- image to be dragged-->  
<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem"> </div>
<div class="box2" id="targetbox"></div> 
<!--box2 declared to received dragged image from box1-->
</form>
<script>
document.getElementById("imagedragitem").ondragstart=ondragstartevt;
document.getElementById("targetbox").ondrop=ondropevt;
document.getElementById("targetbox").ondragenter=ondragenterevt;
document.getElementById("targetbox").ondragover=ondrageoverevet;

 function ondragstartevt(e){
console.log(e);
console.log("calling on drop");
let data='<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="imagedragitem">';
e.dataTransfer.setData("text",data);
}
 <!--ondrop event is --> dragged item (element or text selection) is dragged.t-->
function ondropevt(e){
console.log(e);
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
this.innerHTML=fetchedData;
}
<!--ondragenter event is --> a dragged item enters a valid drop target-->
function ondragenterevt(e){
console.log("calling on drage enter");
let fetchedData=e.dataTransfer.getData("text");
console.log(fetchedData);
e.preventDefault();
  document.querySelector(".box").innerHTML="";

 }

 <!--ondragover event is --> a dragged item is being dragged over a valid drop target, every few hundred milliseconds.-->
function ondrageoverevet(e){
                console.log("dragover");
                e.preventDefault();
                
            }

</script>
</body>
</html>
Output of above code
________________________________________________________________________________

________________________________________________________________________________

Same code can be written in other way as well

<!DOCTYPE html>
<html>
    <head>
        <title>Html5Form</title>
        <style>
            .box,.box2{
                width: 300px;
                height:300px;
                border:solid 2px red;
            }
            .box2{
                margin-top: 5px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="https://i.picsum.photos/id/1025/200/200.jpg" id="dragitem" ondragstart="dragStart(event)">
        </div>
        <div class="box2" id="droptarg" ondrop="dropTarget(event)" ondragenter="dragEnter(event)" ondragover="dragOver(event)"></div>
        <script>
            function dragStart(e){
                console.log(e);
                let data='<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="dragitem">';
                e.dataTransfer.setData("text",data);
            }
            function dropTarget(e){
                console.log("dropped");
                let fetchedData=e.dataTransfer.getData("text");
                console.log(fetchedData)
                document.getElementById("droptarg").innerHTML=fetchedData;
                document.querySelector('.box').innerHTML="";
            }
            function dragEnter(e){
                console.log("dragenter")
                e.preventDefault();
                document.querySelector(".box").innerHTML="";
            }
            function dragOver(e){
                console.log("dragover");
                e.preventDefault();
             
            }
        </script>
    </body>
</html>



----------------------------------------------------------------------------------------------------------------------------


<!DOCTYPE html>
<html>
    <head>
        <title>Html5Form</title>
        <style>
            .box,.box2{
                width: 300px;
                height:300px;
                border:solid 2px red;
            }
            .box2{
                margin-top: 5px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="https://i.picsum.photos/id/1025/200/200.jpg" id="dragitem">
        </div>
        <div class="box2" id="droptarg"></div>
        <script>
            document.getElementById("dragitem").addEventListener("dragstart",dragStart,false);
            document.getElementById("droptarg").addEventListener("dragEnter",dragEnter,false);
            document.getElementById("droptarg").addEventListener("drop",dropTarget,false);
            document.getElementById("droptarg").addEventListener("dragover",dragOver,false);
            function dragStart(e){
                console.log(e);
                let data='<img src="https://i.picsum.photos/id/1025/200/200.jpg" id="dragitem">';
                e.dataTransfer.setData("text",data);
            }
            function dropTarget(e){
                console.log("dropped");
                let fetchedData=e.dataTransfer.getData("text");
                console.log(fetchedData)
                this.innerHTML=fetchedData;
                document.querySelector('.box').innerHTML="";
            }
            function dragEnter(e){
                console.log("dragenter")
                e.preventDefault();
                document.querySelector(".box").innerHTML="";
            }
            function dragOver(e){
                console.log("dragover");
                e.preventDefault();
             
            }
        </script>
    </body>
</html>




Read more about drag and drop events from below website

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API





Pranay is a versatile Oracle Technical consultant. Adept in Oracle ERP development, SDLC management, design, and architecture. He has 11 years of extensive experience in Oracle Apps implementation engaged in technical development areas of Oracle Applications 11i/R12 E-Business Suite. He possesses sound knowledge in technologies like OAF, ADF, J2EE, MSCA, Oracle PaaS Cloud, Java Cloud services, ADF & XML Publisher. Currently, he is working for BirlaSoft Inc. USA. Being a Consistent solution provider in Oracle Developer Community forums earned him the title of "Technology Master”, Currently he holds 3rd position globally for providing a solution in Oracle Developer Community for the OAF Workspace. He has also authored several articles on ADF Technology, Fusion Financials, OAF & PaaS Cloud. He successfully presented the case study in Oracle Collaborate event forum on "How optimizing the Oracle Mobile App Solution Helped in Boosting the Productivity of a Warehouse."

Comments

Post a Comment

Popular posts from this blog

Sample HZ API's script to Create Contacts and Contact Points in Oracle

By -
1. Below Code will create Contact Point in Oracle . DECLARE    P_CONTACT_POINT_REC   HZ_CONTACT_POINT_V2PUB.CONTACT_POINT_REC_TYPE;    P_PHONE_REC           HZ_CONTACT_POINT_V2PUB.PHONE_REC_TYPE;    P_EDI_REC_TYPE        HZ_CONTACT_POINT_V2PUB.EDI_REC_TYPE;    P_EMAIL_REC_TYPE      HZ_CONTACT_POINT_V2PUB.EMAIL_REC_TYPE;    P_TELEX_REC_TYPE      HZ_CONTACT_POINT_V2PUB.TELEX_REC_TYPE;    P_WEB_REC_TYPE        HZ_CONTACT_POINT_V2PUB.WEB_REC_TYPE;    X_RETURN_STATUS       VARCHAR2 (1000);    X_CONTACT_POINT_ID    NUMBER;    X_MSG_COUNT           NUMBER;    X_MSG_DATA            VARCHAR2 (1000); BEGIN    P_CONTACT_POINT_REC.CONTACT_POINT_TYPE := 'EMAIL';    P_CONTACT_POINT_REC.OWN...
Read more

REST integration built-in OIC to read Large files with size more than 10MB

By -
Image
Processing large files in any integration requires a lot of effort and complex coding. Every integration platform has a limit size to read a file, similarly, the OIC service provides a limit of 10MB to read the file, if the size exceeds, then the below error will be encountered  Error Reason: Translation Error. Translation Error. Error while translating message to native format. Please make sure that the payload for the outbound interaction conforms to the schema and payload size does not exceed threshold. Error occured as File size exceeds maximum threshold size of 10 MB : Application Error Error Summary: ICS runtime execution error  In this article, we will learn how to read the big-size file in OIC.  Note only XML and CSV formats are supported for larger file read operations.  Here we will build an integration with a source FTP connector to read files containing sizes more than 10 MB  &  read them through the "Read File in Chunks" features and c...
Read more