資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中使影像可拖動？
在網頁中建立可拖動元素的能力是 HTML5 為 Web 開發人員提供的新功能和技能之一。它變得非常流行和廣泛使用。它只是意味著透過用游標將其拖到那裡來將圖片移動到另一個位置。透過使用滑鼠或觸控動作，使用者將能夠在頁面周圍拖動影像或其他內容。在本文中，我們將瞭解如何在 HTML5 中構建可拖動影像。
使任何 HTML5 元素（包括照片）可拖動都很簡單。使用“draggable”屬性。它接受 true、false 或 auto 作為引數。Auto 是預設值。瀏覽器確定屬性是否可拖動。如果將值設定為 true，則影像可拖動。如果將值設定為 false，則影像不可拖動。
html 中的 draggable 屬性
draggable 屬性指示元素是否可以四處移動。在拖放操作中，通常使用 draggable 屬性。此屬性可以新增到諸如 <p> 標籤之類的標籤中。
語法
<elementTag draggable=”true|false|auto”>
屬性值
true − 表示可拖動為真
false − 表示可拖動為假
方法
我們提供了兩種方法的解決方案：
使用簡單的 HTML 而無需 CSS。
使用帶有 CSS 的 HTML。
讓我們深入瞭解這兩種方法：
方法 1：使用簡單的 HTML 而無需 CSS
演算法
給定問題的演算法：
步驟 1 − 對於 html 5 使用 <!DOCTYPE html>
步驟 2 − 建立頭部和主體標籤。
步驟 3 − 為標題放置 h1 標籤。
步驟 4 − 建立一個 img 標籤，其 src 屬性提供影像的地址。alt 屬性在影像無法載入時顯示備用訊息。
步驟 5 − 要使影像可拖動，請使用 draggable 屬性並將其設定為 true。
示例
<!DOCTYPE html> <html lang="en"> <body> <h1>Image below can be dragged</h1> <img src=" https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg " alt="image" draggable="true"/> </body> </html>
方法 2：使用帶有 CSS 的 HTML
我們可以使用內部 CSS 來設定 HTML 頁面的樣式。使用內部 CSS 為任何 HTML 頁面建立樣式。HTML 頁面 <head> 部分中的 <style> 元素包含內部 CSS 的定義。
在媒體查詢中，@media 規則用於為不同的媒體型別和裝置應用不同的樣式。媒體查詢可以檢查許多專案，包括視口的寬度和高度，還取決於裝置的方向（平板電腦或手機是橫向還是縱向模式？）。使用媒體查詢傳送自定義樣式表（響應式網頁設計）到筆記型電腦、平板電腦、桌上型電腦和手機的常用方法。媒體查詢還可以用於宣告特定樣式僅應與列印材料或螢幕閱讀器一起使用（mediatype：列印、語音或螢幕）。
演算法
給定問題的演算法：
步驟 1 − 對於 HTML 5 使用 <!DOCTYPE html>。
步驟 2 − 建立頭部和主體標籤。
步驟 3 − 建立一個 style 標籤用於 css 併為頁面新增樣式以進行視覺外觀。
步驟 4 − 為標題放置 h1 標籤。
步驟 5 − 建立一個 img 標籤，其 src 屬性提供影像的地址。alt 屬性在影像無法載入時顯示備用訊息。
步驟 6 − 要使影像可拖動，請使用 draggable 屬性並將其設定為 true。
步驟 7 − 使用媒體查詢更改影像寬度，例如移動裝置尺寸。
示例
<!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://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg " alt="image" draggable="true"/>
</div>
</body>
</html>
注意 − 預設情況下，連結和影像可以四處移動。也就是說，它們預設情況下是可拖動的。
結論
本文提供了一種基於 Java 程式語言的解決方案，用於解決查詢和報告陣列中所有重複數字以及它們的頻率的問題。針對此問題，已經展示了兩種不同的方法。第一種方法使用 HashMap 資料結構計算每個值的頻率，而第二種方法使用帶有 ArrayList 的巢狀迴圈來實現。通過了解和應用這兩種方法，您可以在未來編碼面試中更好地應對類似的程式設計問題。
1K+ 次檢視
