jquery实现拖拽

最新推荐文章于 2022-09-13 11:06:10 发布

xluren

最新推荐文章于 2022-09-13 11:06:10 发布

阅读量690

点赞数

分类专栏： op写前端文章标签： jquery

本文链接：https://blog.csdn.net/xluren/article/details/25896403

版权

op写前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0/jquery.min.js"></script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery-ui/1.9.2/jquery-ui.min.js"></script> 
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet">
<style type="text/css"> #draggable { width: 150px; height: 150px; padding: 0.5em; }</style> 
<script type="text/javascript">
$(function ()
	{ 
		for(i=0;i<11;i++)
			$("#draggable"+i).draggable();
	});
</script> 
</head>
<body>
<div id="draggable1" class="ui-widget-content"> <p>鼠标长按移动1</p></div>
<div id="draggable2" class="ui-widget-content"> <p>鼠标长按移动2</p></div>
<div id="draggable3" class="ui-widget-content"> <p>鼠标长按移动3</p></div>
<div id="draggable4" class="ui-widget-content"> <p>鼠标长按移动4</p></div>
<div id="draggable5" class="ui-widget-content"> <p>鼠标长按移动5</p></div>
<div id="draggable6" class="ui-widget-content"> <p>鼠标长按移动6</p></div>
<div id="draggable7" class="ui-widget-content"> <p>鼠标长按移动7</p></div>
<div id="draggable8" class="ui-widget-content"> <p>鼠标长按移动8</p></div>
<div id="draggable9" class="ui-widget-content"> <p>鼠标长按移动9</p></div>
<div id="draggable10" class="ui-widget-content"> <p>鼠标长按移动10</p></div>

</body>
</html>

xluren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现拖拽

test #draggable { width: 150px; height: 150px; padding: 0.5em; } $(function () { for(i=0;i<11;i++) $("#draggable"+i).draggable(); }); 鼠标长按移动1 鼠标长按移动2 鼠标长按移动3 鼠标长按移动4 鼠标长按移动5 鼠
复制链接

扫一扫