📌  相关文章
📜  jQuery UI 可拖动的 destroy() 方法(1)

📅  最后修改于: 2023-12-03 15:32:10.784000             🧑  作者: Mango

jQuery UI 可拖动的 destroy() 方法

简介

jQuery UI 是一个开源 JavaScript 库，提供丰富的交互式插件，使 Web 开发更加高效。其中，可拖动插件（Draggable）提供了一个可以将页面上的元素拖动到其他指定区域的交互方式。

destroy() 方法是 Draggable 插件提供的一个方法，可以撤销通过 draggable() 方法建立的拖动功能。

语法
$( ".selector" ).draggable( "destroy" );

参数：

  • "destroy" 表示要撤销的方法。
示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Draggable</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>
  <div id="box" class="ui-widget-content">
    <p>可拖动的元素</p>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $( function() {
      $( "#box" ).draggable();
    } );
    
    // 撤销拖动功能
    $( "#box" ).draggable( "destroy" );
  </script>
</body>
</html>

本示例在页面中创建了一个可拖动的元素，并在载入完成后开启了拖动功能。通过 destroy() 方法撤销拖动功能后，再次尝试拖动该元素将不起作用。

总结

destroy() 方法是 Draggable 插件提供的一个简单但实用的撤销方法，可以方便地取消通过 draggable() 方法添加的拖动功能。在使用时，只需要在目标元素上调用该方法即可。它可避免在开发中因为添加的拖动功能影响到其他行为而出现的问题，提高了代码的可维护性和健壮性。