Friday, May 15, 2020

Html Useful Drag and Drop Functionality

HTML DRAG AND DROP FUNCTIONALITY IMPLEMENTATION


Image Drag and Drop into the HTML using JQUERY | DRAG and DROP into the Web Page 


Drag and drop code in two-part:

first: HTML part in which you can see both drop and draggable div 
second: Javascript code to drag and drop div

HTML Part:

<div id="div1" draggable="true" ondragstart="drag(event)" class="item" val1="123">my div</div>// this div will be draggable

<div ondrop='drop(event)' ondragover='allowDrop(event)' style='background-color:wheat;'></div> //this div will be dropable

Javascript Part:

function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));

            var target = ev.target || ev.srcElement;
            var id = target.id;           
        }

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

SQL Server Unique Constraint

SQL Server Unique Constraint Whats is Unique Constraint in SQL | How to create Unique Constraint in SQL | Unique Constraint with Example in ...