Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make an image draggable in HTML?
The ability to create draggable elements within a web page is one of the new features and skills that HTML5 offers for web developers. It becomes a very popular and widely utilized feature. It simply means to move a picture to another location by dragging it there with the cursor. By employing mouse or touch motions, users will be able to drag an image or other content around the page. In this article, we'll look at how to build a draggable image in HTML5.
It's simple to make any HTML5 element draggable, including photos. The 'draggable' feature is utilized. It accepts the arguments as true, false, or auto. Auto is the default value. The browser determines if a property is draggable. The image is draggable if the value is set to true. The picture is not draggable if the value is set to false.
The draggable attribute in html
The draggable attribute indicates whether or not an element may be moved about. In drag-and-drop operations, the draggable characteristic is usually employed. This attribute can be added to tags such as <p> tag
Syntax
<elementTag draggable=”true|false|auto”>
Attribute Value
true − indicate true for draggable
false − indicate false for draggable
Approaches
We have provided the solution in two approaches −
Utilizing a simple HTML without CSS.
Utilizing HTML with CSS.
Let us look into both approaches −
Approach 1: Utilizing a simple HTML without CSS
Algorithm
Algorithm for the given problem −
Step 1 − For html 5 use <!DOCTYPE html>
Step 2 − Create a head as well as body tag.
Step 3 − Place a heading h1 tag for heading
Step 4 − Create an img tag with src attribute providing the address of image. The alt attribute display the alternate message when image is unable to load.
Step 5 − To make image draggable utilize draggable attribute and set it true.
Example
<!DOCTYPE html> <html lang="en"> <body> <h1>Image below can be dragged</h1> <img src=" https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg " alt="image" draggable="true"/> </body> </html>
Approach 2: Utilizing HTML with CSS
We can use internal CSS to style HTML page. A style for any HTML page is established utilizing internal CSS. An <style> element in the <head> section of an HTML page contains the definition of an internal CSS.
In media queries, the @media rule is utilized to apply various styles for various media kinds and devices. Many items can be checked with media queries, including the viewport's width and height are also dependent on the device's orientation (is the tablet or phone in landscape or portrait mode?). A common method for sending a customized style sheet (responsive web design) to laptops, tablets, desktops, and mobile phones is to employ media queries. Media queries may additionally be employed to declare that a particular style ought to only be employed with printed materials or screen readers (mediatype: print, speech, or screen).
Algorithm
Algorithm for the given problem −
Step 1 − For HTML 5 <!DOCTYPE html> is utilized.
Step 2 − Create a head as well as a body tag.
Step 3 − Create a style tag for css and add styling to the page for visual appearance.
Step 4 − Place a heading h1 tag for the heading.
Step 5 − Create an img tag with a src attribute providing the address of the image. The alt attribute displays the alternate message when the image is unable to load.
Step 6 − To make the image draggable utilize the draggable attribute and set it to true.
Step 7 − Utilize media query for changing image width as for mobile size.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.image{
margin:auto;
display: block;
text-align: center;
}
h1{
color:purple;
}
img{
border-radius: 10%;
border: solid 1px;
width:300px;
}
/* For mobile phones add media query and set width to 200px: */ @media only screen and (max-width: 768px) {
img{width:200px;
}}
</style>
</head>
<body>
<div class="image">
<h1>Image below can be dragged</h1>
<img src= "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg " alt="image" draggable="true"/>
</div>
</body>
</html>
Note − Links as well as images can be moved around by default. That is they are draggable by default.
Conclusion
This article offers a Java programming language-based solution to the issue of locating and reporting all the repeated numbers in an array together with their frequency. For this issue, two distinct strategies have been shown to work. The first method counts the frequency of each value using the HashMap data structure, while the second method does so using nested loops with ArrayList. By knowing and applying these two ways, you can be better equipped to tackle similar programming issues in future coding interviews.
397 Views
