让元素在网页中可拖拽

标签： 元素 网页 | 发表时间：2013-08-12 23:00 | 作者：
出处：http://www.iteye.com

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推荐



相关 [元素 网页] 推荐：

网页设计中的方块元素

- - 可乐橙
当你欣赏下面这些案例时，留意一下他们如何以及为何使用矩形或正方形元素，会使得你思路大开. 此处列举的方块元素，被用来对齐、组织、装饰、排列页面上的方与圆. 在设计中使用方块元素有很多方法和原因. 或许这对你而言有点哲学和理论化，我们来看看别人选择方块布局的原因. （顺便提一句，我所指的方块也包括矩形，有些案例也使用矩形.

让元素在网页中可拖拽

- - ITeye博客
2.带有id的div元素:. 已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

浅谈网页元素与页面的转场设计

- 章明 - 互联网的那点事
在电视作品中，段落与段落、场景与场景之间的过渡或转换，叫做转场. 为了使电视片内容的条理性更强、层次的发展更清晰、在场面与场面之间的转换中，需要一定的手法. 网站也是类似的，一个完整的网站由若干页面组成，而每个页面又由若干元素组成. 为了使网站内容的条理性更强、操作逻辑更清晰、用户体验更好、用户转化率更高，在不同元素与页面的转换中，也需要一定的技巧.

32套免费的网页、移动设备UI元素和模板

- 壮壮爱 - 互联网的那点事...
对于项目管理，良好的时间安排和组织是必不可少的. 以网页设计为例，当你想准时交付一个项目时，有几个时间因素需要你考虑. 如果你能够有效地利用时间，可以肯定你将能按时甚至提前完成你的项目. 这就是为什么你应该考虑用何种方式去组织管理你的时间. 如果你能正确地使用合适的工具，网页设计对你来说将是小菜一碟，你可以在网上找到这些免费的工具，这些工具将帮助你更快更有效地完成你的线框图，并且看起来像设计过的成品一样.

干货！专为网页设计师提供设计元素和代码片段的Bootsnipp

- - 优设(UISDC)
Bootsnipp 上面有许多人分享的UI资源和交互代码，赶紧去探寻宝藏吧. 在这个页面组件画廊里，为网页设计师和网站开发人员提供了各种各样的网页设计元素，如果您不会编写代码也没关系，可以预览您喜欢的特效，然后下载使用，修改相关字段即可. 如果您有一定编码基础，那更好了，这绝对是学习网页特效的宝库，你会觉得这是饕餮盛宴、海天盛筵.

逃走的元素

- Zoe - 玩意儿
艺术家将寻常东东让它们部分元素像是往外逃走的样子，营造一种3D错觉感，很创意深刻，这里有他更多的作品，点此访问. 本文原始链接：http://www.cngadget.cn/tao-zou-de-yuan-su.html.

伪类元素之美

- Kings - 收集分享互联网资源!
通过使用:before和:after，你能创作出让人称奇的视觉效果. 对页面中的每个元素，你都有两个额外的可以控制的元素，本来这些是需要额外的元素来实现. 他们给设计带来了更多的趣味性的空间，而不是增加无语义的有负面影响的标签. 这里给大家整理了一堆让人称奇的东西. 因为你可以相对于他们的父元素绝对定位伪类元素，你可以把他们想象他们是每个元素的两个额外层.

jQuery操作HTML元素

- - CSDN博客推荐文章
JQuery 获取、设置input的值$("#txtID").val();. JQuery 获取、设置label的值$("#labelID").text(); $("#labelID").html(buildName); . 获取一组radio被选中项的值. 获取select被选中项的文本. select下拉框的第二个元素为当前选中值.

OpenLayers 选中元素弹框

- - Web前端 - ITeye博客
已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.