/**/

Dragable拖动函数

首页 / jQuery入门教程 / Dragable拖动函数

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 - 交互行为 - Dragable拖动函数》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

软件测试52讲 -〔茹炳晟〕

透视HTTP协议 -〔罗剑锋(Chrono)〕

从0打造音视频直播系统 -〔李超〕

业务开发算法50讲 -〔黄清昊〕

如何限制select2中的字符?

用布尔值隐藏/显示元素

将返回的 JSON 对象属性转换为(较低的第一个)camelCase

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

jQuery获取图片src

如何在使用 jQuery 单击特定链接时打开 bootstrap 导航选项卡的特定选项卡?

视频教程

jQuery-20-表单属性过滤器例子 更多视频教程 »