1.导入相应的JS类库:
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2.带有id的div元素:
- <div id="draggable">
- <p>Drag me around!</p>
- </div>
3:设置div的样式:
- #draggable {
- width:150px;
- height:150px;
- padding:0.5em;
- border:1px solid;
- }
4:让元素可拖动：
- <script>
- $(function() {
- $('#draggable').draggable();
- });
- </script>
效果请点击： http://jsfiddle.net/tounaobun/KS8JC/
源代码：
- <!-- import the necessary files -->
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
- <script>
- $(function() {
- $('#draggable').draggable();
- });
- </script>
- <style>
- #draggable {
- width:150px;
- height:150px;
- padding:0.5em;
- border:1px solid;
- }
- </style>
- <div id="draggable">
- lt;p>Drag me around!</p>
- </div>
已有 0人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
