如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
html/javascript 如何实现标签拖拽移动
本经验介绍在html/javascript开发中,如何实现标签的拖拽移动。应用场景如:悬浮工具面板的移动。
工具/原料
- Firefox
方法/步骤
首先,如图在浏览页面内有一个img标签,id为my-bigimg。稍后将实现这个图片/或者div盒子的拖拽移动。
首先,可以用jQuery给这个控件添加load处理函数,在这个img图片已经载入后,进行参数初始化,和其它事件的添加。
在load处理函数内,首先根据id获取要被拖动的标签,用变量drag保存,在这里,是img标签所在div盒子。
用变量isdown记录鼠标按下情况,用diffX和diffY记录点击位置在控件内的偏移量。
接下来,给drag标签的onmousedown鼠标按下添加处理函数,记录偏移并且设置按下为true。
然后,在document的onmousemove鼠标移动添加处理函数,如果isDown==false直接返回,否则,计算移动位置,移动。其中的if判断保证控件不被拖出页面外。
接着在document的onmouseup鼠标抬起添加处理函数,设置isDown为false。
另外,由于img标签的图片自带拖动效果,为了保证正常拖动,需要禁用img标签的默认效果。如图使用preventDefault()实现。
注意事项
- 注意,mousedown是在drag待拖动标签,mousemove和mouseup是在document上。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
标签: HTMLJAVASCRIPT
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 437 HTML