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

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 create multiple files  at
Read more

Basic Concepts of OAF (Oracle Applications FrameWork )

By -
Image
OAF stands for Oracle Applications Framework. This particular technology will be used to  develop Application pages , all pages will be of Web base. In Previous versions of Oracle Ebiz , Oracle Forms has been widely used to develop transactions forms , but due to its heavy nature & Time consuming Performance ,it becomes very  difficult to carry out Business operations. To improve the Performance , Oracle has introduced OAF. Oracle Application Framework (OAF) is an architecture for creating web based pages with in Oracle EBS platform.  OAF functionality can be achieved using JDEVELOPER Tool. OAF follows MVC architecute. MVC stands for Module View Controller Architecture  Schematic representation of MVC Architecture  Model (bc4j Component) Model contains the BC4J Components or objects which handles data directly from Database. It Includes Business Components for Java (BC4J Objects) which mainly are: • Entity Object • View Object • Application Module
Read more