Dragable拖动 函数

首页 / jQuery / 可拖动

Drag-able 函数可与JqueryUI中的交互一起使用。此函数可在任何DOM元素上启用可拖动功能。无涯教程可以通过使用鼠标单击来拖动可拖动元素。

Drag able - 语法

 $( "#draggable" ).draggable();

Drag able - 示例

下面是一个简单的示例,显示可拖动的用法-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
		
      <script type="text/javascript" language="javascript">
   
         $(function() {
            $( "#draggable" ).draggable();
         });
		 
      </script>
		
      <style>
         #draggable { width: 150px; height: 150px; padding: 0.5em; }
         .back{
            background-color: lightgrey;
            width: 50px;
            padding: 25px;
            border: 25px solid navy;
            margin: 25px;
         }
      </style>
   </head>
	
   <body>
      <div id="draggable" class="ui-widget-content">
         <p class="back">Drag</p>
      </div>
	 
   </body>
</html>

这将产生以下输出-

无涯教程网

这一章《jQuery - Interactions - Dragable拖动 函数》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

相关文章

Go语言从入门到实战 -〔蔡超 - 55讲〕

研发效率破局之道 -〔葛俊 - 40讲〕

手把手带你写一个Web框架 -〔叶剑峰 - 41讲〕

说透低代码 -〔陈旭 - 39讲〕

即使我使用 [FromBody] C# 从视图(Ajax)发送请求时在控制器中收...

Google Maps API v3 infowindow 关闭事件/回调?

在 react js 中进行 API 调用的正确方法是什么?

如何判断是否有任何 JavaScript 事件侦听器/处理程序附加到元素/...

jQuery获取图片src

bootstrap 模式:关闭当前,打开新

视频推荐〔jQuery-19-表单属性过滤器〕

更多视频 »
好记忆不如烂笔头。留下你的足迹吧 :)