让元素在网页中可拖拽

1.导入相应的JS类库:

 

[html]  view plain copy

 

1. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
2. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  

 

2.带有id的div元素:

 

[html]  view plain copy

 

1. <div id="draggable">  
2. <p>Drag me around!</p>  
3. </div>  

 

 

3:设置div的样式:

 

[css]  view plain copy

 

1. #draggable {  
2.     width:150px;  
3.     height:150px;  
4.     padding:0.5em;  
5.     border:1px solid;  
6. }  

4:让元素可拖动：

 

 

[javascript]  view plain copy

 

1. <script>  
2. $(function() {  
3.     $('#draggable').draggable();  
4. });  
5. </script>  

效果请点击： http://jsfiddle.net/tounaobun/KS8JC/

 

源代码：

 

[html]  view plain copy

 

1. <!-- import the necessary files -->  
2. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
3. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
4.   
5. <script>  
6. $(function() {  
7.     $('#draggable').draggable();  
8. });  
9. </script>  
10. <style>  
11. #draggable {  
12.     width:150px;  
13.     height:150px;  
14.     padding:0.5em;  
15.     border:1px solid;  
16. }  
17. </style>  
18.   
19. <div id="draggable">  
20. lt;p>Drag me around!</p>  
21. </div>  

已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—