JavaScript+css+div可拖动div简单实现（雏形）

麦草CMS 2019-03-30 10:12:55

在一个web页面上放上一些可拖动div，有时候会感觉很酷。

下面就写了一个雏形。
http://mycms.xyz/blog/view.php?aid=9
这个雏形构思时就是要完美，所以予以完善了会很强大哦。自夸

展示：http://mycms.xyz/drag.html

...全文

386 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

hookee 2019-03-31

打赏
举报

回复

「已注销」 2019-03-30

打赏
举报

回复

好的记得给我分

li905663280 2019-03-30

打赏
举报

回复

棒

拖拽的原理：其实就是鼠标与左上角的距离保持不变。我们来看下图，这红点就是鼠标。拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置，就是这么简单，就是这么任性。那这个距离怎么求呢？？鼠标的位置-物体位置的差值就是那个距离是吧。那这个斜线就是横线和竖线组成的。我们距离看下程序怎么做。 <div id=div1> div> 实际上他改的就是某个div 的left top ，那他就动起来了。那样式中肯定要有绝对定位是吧。 <style type=text/css> #div1 { width: 200px; hei

第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征：正...

前端学什么？第一阶段：HTML+CSS+JS基础（1） HTML+CSS: HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发、（2） JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。（3） JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。打造全网web前端全栈资料库（总目录）看完学的更

web前端自学都要学什么？第一阶段：HTML+CSS+JS基础（1） HTML+CSS: HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发（2） JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。（3） JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。程序猿的生活：前端只需要掌握这些，你也能拿8K！（

前端学习路线图第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 J...

87,997

社区成员

224,709

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章