jQuery 如何禁用jQuery-ui部件的可拖动功能

我们可以通过使用draggable禁止选项来禁用jQuery UI可拖动部件。

jQuery是一个JavaScript库，通过其各种辅助方法和属性，帮助我们轻松高效地操纵DOM。它允许我们为DOM添加交互性，以及添加和更改DOM元素的CSS样式。

语法

$(element).draggable({ disabled: true })

我们将在应用程序中使用以下的jQuery链接−

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

上述提供的代码片段是一个链接标签，从jQuery UI库导入CSS文件。

示例1

在这个示例中，我们将创建一个容器，其中不可拖动。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable a jQuery-ui draggable of widget?</title>
   <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
   <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

   <style>
      .draggable {
         width: 150px;
         height: 150px;
         padding: 0.5em;
         float: left;
         margin: 10px 10px 10px 0;
      }
      #draggable { background-color: red; }
   </style>
</head>
<body>
   <h3>How to disable a jQuery-ui draggable of widget?</h3>
   <div class="draggable" id="draggable"></div>
   <script>  
       $(document).ready(function() {$ ('#draggable').draggable({
            disabled: true
         });
      });  
   </script>  
</body>
</html>

示例2

在这个例子中，我们将创建一个div容器，并通过两种方法将其禁用，一种是通过widget禁用选项禁用它，另一种是使用destroy方法。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable a jQuery-ui draggable widget?</title>
   <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
   <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

   <style>
      .draggable {
          width: 150px;
          height: 150px;
          padding: 0.5em;
          margin: 10px 10px 10px 0;
      }
      #draggable { background-color: red; }
   </style>
</head>
<body>
   <h3>How to disable a jQuery-ui draggable widget?</h3>
   <div class="draggable ui-state-default" id="draggable"></div>
   <button id="button1">Click to disable the draggability of the above container (Using widget disable option)</button>
   <button id="button2">Click to disable the draggability of the above container (Using destroy method)</button>
   <script>  
       $(document).ready(function() {$ ('#draggable').draggable({
             disabled: false
         });
         // Method 1: Disabling it through the widget disable option
          $('#button1').click(function() { }); // Method 2: Using destroy method$ ('#button2').click(function() {
            $('#draggable').draggable('destroy');
         });
      });  
   </script>  
</body>
</html>