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>
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln">
</span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"</span><span class="tag">></span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">></span><span class="pln">
$</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
$</span><span class="pun">(</span><span class="pln"> </span><span class="str">"#draggable"</span><span class="pln"> </span><span class="pun">).</span><span class="pln">draggable</span><span class="pun">();</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</span><span class="tag"><style></span><span class="pln">
</span><span class="com">#draggable { width: 150px; height: 150px; padding: 0.5em; }</span><span class="pln">
</span><span class="pun">.</span><span class="pln">back</span><span class="pun">{</span><span class="pln">
background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> lightgrey</span><span class="pun">;</span><span class="pln">
width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln">
padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">25px</span><span class="pln"> solid navy</span><span class="pun">;</span><span class="pln">
margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag"></style></span><span class="pln">
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p class="back">Drag</p>
</div>
</body>
</html>
这将产生以下输出-
