初学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 拖拽,
在本主题中,我们将深入探讨如何使用纯JavaScript实现div元素的拖动功能。 首先,我们需要理解HTML中的`<div>`元素。`<div>`是一个通用的容器标签,用来组织页面内容。为了让`<div>`元素可以被拖动,我们需要通过...
在JavaScript编程中,实现DOM元素(如DIV)的拖拽和动态添加是常见的交互功能,这对于构建具有用户友好界面的Web应用至关重要。本教程将详细讲解如何使用纯JavaScript实现这一功能,无需依赖任何外部库,如jQuery或...
在JavaScript中实现div元素的拖动功能是一项常见的交互设计任务,尤其在开发Web应用程序时。这一功能让用户可以通过鼠标操作动态调整div的位置,提供了一种直观的用户界面体验。下面我们将详细探讨如何利用...
在JavaScript编程中,实现DIV元素的拖拽布局是一项常见的任务,尤其在构建可交互的Web应用或自定义桌面界面时。这项技术的核心是利用事件监听和DOM操作来模拟物理世界中的拖放行为。下面我们将详细探讨如何实现这个...
标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素,特别是`div`元素位置的技术。在这个示例中,开发者可能想要创建一个交互式的用户界面,用户可以通过鼠标拖拽来调整`div`元素的顺序...
在JavaScript(JS)中实现div元素的拖动和动画运行轨迹效果是一项常见的前端开发任务,主要涉及DOM操作、事件监听以及动画帧的处理。在这个项目中,`js实现div拖动动画运行轨迹效果源码.zip`包含了一个示例,帮助...
JavaScript 实现简单的 Div 拖拽功能是一种常见的交互设计,常用于网页上的可操作元素,如窗口、面板或自定义控件。以下是对这个实例的详细解析: 首先,我们需要一个包含拖拽功能的 Div 元素。在 HTML 中,我们...
本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...
通过这种方式,我们实现了在.NET环境中使用JavaScript实现的div拖拽功能。需要注意的是,这个简单的实现可能不会处理页面滚动、边界限制或与其他元素的碰撞检测等复杂情况。在实际应用中,你可能需要对代码进行扩展...
javaScript实现DIV简单拖拽
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
以上就是利用Ajax实现div拖拽功能的基本原理和实现步骤。这个功能在许多交互式的Web应用中都很常见,例如在线编辑器、日历应用、画板等。通过Ajax,我们可以将用户的操作实时同步到服务器,提供更流畅的用户体验。
本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”,这是一项实用技术,尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先,让我们了解...
js拖动 拖拽div大小,内部随意文件操作。完美实现版
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...
用js+css轻松实现网页的浮动拖动窗口。
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
利用JS实现可拖动的DIV效果,在原有基础上增加的限制在一定区域内的效果。方便,易用。可以很方便地移动到您的工程里面