HTML - attributes - draggable

revision:

Content

"draggable" attribute : specifies whether an element is draggable or not. syntax some examples

"draggable" attribute : specifies whether an element is draggable or not.

top

Links and images are draggable by default. The draggable attribute is often used in drag and drop operations. The draggable attribute is a Global Attribute and can be used on any HTML element.

syntax

top

<tag draggable="true|false|auto"></tag>

draggable can have the following values: true (the element can be dragged), false (the element cannot be dragged).

If this attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged.

some examples

top

This is a draggable paragraph. Drag this element into the rectangle.

codes 
                    <div style="margin-left:5vw;" id="div1" ondrop="drop(event)" 
                    ondragover="allowDrop(event)"></div>
                    <br>
                    <p class="spec" id="drag1" draggable="true" ondragstart="drag(event)">
                    This is a draggable
                    paragraph. Drag this element into the rectangle.</p>
                    <script>
                        function allowDrop(ev) {
                            ev.preventDefault();
                        }
            
                        function drag(ev) {
                            ev.dataTransfer.setData("Text", ev.target.id);
                        }
            
                        function drop(ev) {
                            var data = ev.dataTransfer.getData("Text");
                            ev.target.appendChild(document.getElementById(data));
                            ev.preventDefault();
                        }
                    </script>

Drag the image into the rectangle:


codes 
                    <p class="spec" style="margin-left:5vw;">Drag the image into the 
                    rectangle:</p>
                    <div style="margin-left:5vw;" id="div2" ondrop="dropIt(event)" 
                    ondragover="nowDrop(event)"></div>
                    <br>
                    <img id="drag2" src="../../pics/cartoon.jpg" draggable="true" ondragstart="dragIt(event)"
                    width="110" height="70">
                    <script>
                        function nowDrop(ev) {
                            ev.preventDefault();
                        }
            
                        function dragIt(ev) {
                            ev.dataTransfer.setData("text", ev.target.id);
                        }
                        function dropIt(ev) {
                            ev.preventDefault();
                            var data = ev.dataTransfer.getData("text");
                            ev.target.appendChild(document.getElementById(data));
                        }
                    </script>