初学js,实现了一个div拖拽的功能,不过还有很多bug,鼠标移动的太快就div就落后了,真不知道怎么解决。郁闷。。。。
拖动时不能选中文字问题解决比较尴尬,在firefox和ie中效果比较好。但chorme中拖动时被选中的几率还是很大。没能很好的解决
<html>
<head>
<title>简单的DIV拖动</title>
<script type="text/javascript">
function mydrag(id, id_title, id_content) {
var obj = document.getElementById(id);
var obj_title = document.getElementById(id_title);
var obj_content = document.getElementById(id_content);
var beginx, beginy, endx, endy;
var isdown = false;
function mousedown(ev)
{
var event = window.event || ev; //ie与其他浏览器的兼容性
beginx = event.clientX;
beginy = event.clientY;
isdown = true;
obj.style.opacity=0.7; //实现半透明效果
}
function mousemove(ev)
{
if(isdown){
var event = window.event || ev;
endx = event.clientX;
endy = event.clientY;
obj.style.left = parseInt(obj.style.left)+endx-beginx; //obj.style.left带有单位px
obj.style.top = parseInt(obj.style.top)+endy-beginy;
beginx = endx; //更新坐标
beginy = endy;
setSelected(obj_content, false);
}
}
function mouseup()
{
isdown = false;
obj.style.opacity=1.0;
setSelected(obj_content, true);
}
function setSelected(target, boo){
//设置文字是否可以复制boo=true时可以复制,否则禁止复制
if (typeof target.onselectstart!="undefined"){ //IE
target.onselectstart=function(){
return boo;
}
}else if (typeof target.style.MozUserSelect!="undefined"){ //Firefox
/*MozUserSelect有三个值:
*1.none表示所有子元素都不能被选择
*2.-moz-all子元素的所有文字都可以被选择
*3.-moz-none子元素的所有文字都不能选择,但input除外
*/
if(boo) target.style.MozUserSelect="-moz-all";
else target.style.MozUserSelect="none";
}else{ //other
target.onmousedown=function(){
return boo;
}
}
}
obj_title.onmousedown = mousedown;
obj_title.onmousemove = mousemove;
obj_title.onmouseup = mouseup;
setSelected(obj_title, false);
setSelected(obj_content,true);
}
window.onload=function(){
mydrag("nav", "title");
}
</script>
<style type="text/css">
#nav{
width: 800px;
height: 100px;
border:1px solid #92B0DD;
background-color: #FFFFFf;
position:absolute; <!--position默认为静态的,所以这里必须声明为相对的或绝对的,否则无法移动-->
}
#title{
background:#EEFAFF;
padding:10px;
}
</style>
</head>
<body>
<div id="nav" style="left:300px;top:200px;">
<!--必须设置left,top的初始值,parseInt(obj.style.left||top)为空-->
<div id="title" style="cursor:move;">我是标题</div>
<div id="content">我是内容</title>
</div>
</body>
</html>
分享到:
相关推荐
JS 实现 DIV 拖拽,
js实现div拖动功能 js实现div拖动功能 js实现div拖动功能 js实现div拖动功能
js实现DIV拖动布局,可以用来实现自定义桌面
很棒的用Javascript实现DIV的拖拽和添加
纯js实现多个div在页面上,随意的拖动!
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
js实现div拖动动画运行轨迹效果源码.zip
javaScript实现DIV简单拖拽
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
用js+css轻松实现网页的浮动拖动窗口。
NULL 博文链接:https://wangking717.iteye.com/blog/1718422
可以实现div在页面中随意拖动
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
js实现简单div拖拽功能实例.docx
javascript实现div的拖拽 html 文件,兼容火狐 IE
一个很好用的javaScript写的小程序,可实现div的拖动、变形。解压后直接拷到程序中就可运行
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
js实现弹出div任意拖拽
vue实现页面div盒子拖拽排序功能 vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: ...