jquery实现拖拽

来源：互联网发布：攻城掠地数据库修改编辑：程序博客网时间：2024/05/22 10:36
<!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>
0 0