如何使用JavaScript/jQuery禁止从HTML页面拖动图片

拖放 “是一个非常互动和用户友好的概念，它使人们更容易通过拖动一个对象来移动到不同的位置。它允许用户在一个元素上点击并按住鼠标按钮，将其拖到另一个位置，然后释放鼠标按钮，将该元素放到那里。在HTML 5中，”拖放 “更容易编码，其中的任何元素都是可拖动的。链接和图片默认是可拖动的。这一功能在大多数网站上都被启用。谷歌甚至允许用户使用图片拖放功能进行图片搜索，也被称为图片拖放功能。该功能使用户能够点击任何图像，然后将其拖到其他地方。这将创建一个被点击图像的透明副本，同时保持原图像的位置。然而，可以使用JavaScript/jQuery禁用图像拖动功能。

方法1：该方法使用jQuery将可拖动属性设置为假。

语法:

$('#myImage').attr('draggable', false);

示例:

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to disable dragging an image
        from an HTML page using JQuery?
    </title>
     
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
 
<body style="text-align:center">
    <center>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h3>
        Click on the button to
        disable dragging an image
    </h3>
     
    <button onclick = "myGeeks()">
        Disable image dragging
    </button>
     
    <br>
     
    <img id="img" src=
"https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png">
    
    <script type="text/javascript">
        function myGeeks() {
            $('#img').attr('draggable', false);
        }
    </script>
</body>
 
</html>

输出:

如何使用JavaScript/jQuery禁止从HTML页面拖动图片？

方法2：该方法使用JavaScript将可拖动属性设置为假。

语法:

document.getElementById('myImage').draggable = false;

示例:

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to disable dragging an image
        from an HTML page using JQuery?
    </title>
     
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
 
<body style="text-align:center">
    <center>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h3>
        Click on the button to
        disable dragging an image
    </h3>
     
    <button onclick = "myGeeks()">
        Disable image dragging
    </button>
     
    <br>
     
    <img id="img" src=
"https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png">
    
    <script type="text/javascript">
        function myGeeks() {
            document.getElementById('img').draggable = false;
        }
    </script>
</body>
 
</html>

输出:

如何使用JavaScript/jQuery禁止从HTML页面拖动图片？