資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何防止幽靈影像拖動？
預設情況下，我們可以透過點選所有 HTML 元素來拖動它們。但是，使用者不應該能夠拖動不可拖動的元素。否則，他們將無法區分可拖動和不可拖動的元素，因為所有元素都是可拖動的。
網頁上的影像也可以拖動。在本教程中，我們將學習防止幽靈影像拖動的各種方法。
示例 1（拖動影像）
在本示例中，我們將影像新增到網頁中。此外，我們使用 CSS 設定了影像的尺寸。在輸出中，使用者可以嘗試拖動影像並觀察影像是否可拖動。
<html>
<head>
<style>
img { width: 300px; height: 300px;}
</style>
</head>
<body>
<h2> Dragging the <i> images </i> in HTML5 </h2>
<img src = "https://tutorialspoint.tw/static/images/simply-easy-learning.png" alt = "image">
</body>
</html>
語法
使用者可以按照以下語法使用可拖動屬性來防止拖動幽靈影像。
<img draggable = "false" src = "URL" alt = "image">
在以上語法中，我們使用了帶有 HTML 'img' 元素的“可拖動”屬性。
示例 2（防止拖動影像）
在下面的示例中，我們將影像新增到網頁中。此外，我們在“img”元素中添加了具有“false”值的“可拖動”屬性。
在輸出中，使用者可以嘗試拖動影像並觀察影像是否不可拖動。
<html>
<head>
<style>
img {width: 300px;height: 300px;}
</style>
</head>
<body>
<h2> Preventing the dragging the <i> images </i> in HTML5 </h2>
<img draggable = "false" src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" alt = "image">
</body>
</html>
示例 3（使用 JavaScript 防止拖動影像）
在本示例中，我們使用 JavaScript 來防止拖動幽靈影像。在 JavaScript 中，我們訪問影像元素，並使用 setAttribute() 方法為影像元素設定可拖動屬性。
在這裡，我們將“可拖動”作為第一個引數，將“false”作為“setAttribute”方法的第二個引數傳遞。
<html>
<head>
<style>
img {width: 300px;height: 300px;}
</style>
</head>
<body>
<h3> Preventing the dragging the <i> images </i> in HTML5 using JavaScript </h3>
<img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" alt = "image">
<script>
var img = document.getElementsByTagName('img')[0];
// add draggable = false to the image
img.setAttribute('draggable', false);
</script>
</body>
</html>
示例（使用 JQuery 防止拖動影像）
在下面的示例中，我們使用 JQuery 來防止在網頁上拖動幽靈影像。在這裡，我們使用標籤名稱訪問影像元素，並使用 attr() 方法將可拖動屬性設定為 false 值。在輸出中，我們可以看到我們無法拖動影像。
<html>
<head>
<style>
img {
width: 300px;
height: 300px;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h3> Preventing the dragging the <i> images </i> in HTML5 using jQuery </h3>
<img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/1895/course_1895_image.png" alt = "image">
<script>
// adding draggable attribute to the image using JQuery
$("img").attr("draggable", "false");
</script>
</body>
</html>
我們學習瞭如何防止幽靈影像在網頁上拖動。我們使用“可拖動”屬性來實現我們的目標。在第 3 和第 4 個示例中，我們使用 JavaScript 和 JQuery 為影像元素設定可拖動屬性。
使用者可以將可拖動屬性與任何 HTML 元素一起使用，以防止拖動該元素。
更新於： 2023年7月26日
870 次瀏覽
廣告