`
高级java工程师
  • 浏览: 408104 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js实现拖拉正方形

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>定位</title>
<script type="text/javascript">
function getRealStyle(obj,s) {
var style;
if (window.getComputedStyle) {//W3C DOM
style=window.getComputedStyle(obj,null);
} else if (obj.currentStyle) {//IE
style=obj.currentStyle;
}
return style[s];
}

function innerSize() {
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
}
window.onload=function () {
var oDiv=document.getElementById("oDiv");
/*var w=getRealStyle(oDiv,'width'),
h=getRealStyle(oDiv,'height');
var innerDiv=document.getElementById("innerDiv");
var w=oDiv.clientWidth,
h=oDiv.clientHeight,
sw=oDiv.scrollWidth,
sh=oDiv.scrollHeight,
ow=oDiv.offsetWidth,
oh=oDiv.offsetHeight,
size=innerSize(),
cl=oDiv.clientLeft,
ct=oDiv.clientTop,
x=oDiv.offsetLeft,
y=oDiv.offsetTop;
//alert(w+"\n"+h);
//alert(ow+"\n"+oh);
//alert(size.width+"\n"+size.height);
//alert(sw+"\n"+sh);
//alert(x+"\n"+y);
//alert(innerDiv.offsetLeft+"\n"+innerDiv.offsetTop);
//alert(innerDiv.offsetParent.tagName);
//var de=document.documentElement;
//alert(de.scrollLeft+"\n"+de.scrollTop);

addEvent(oDiv,'click',function (evt) {
//alert("Client:"+"\n"+evt.clientX+"\n"+evt.clientY);
//alert(evt.layerX+"\n"+evt.layerY);
//alert("Page:"+"\n"+evt.pageX+"\n"+evt.pageY);
//Opera支持addEventListener方法,但不支持layerX/layerY
//Opera使用offsetX/offsetY
});*/

addEvent(oDiv,'mousedown',function (evt) {
evt.preventDefault();
this.flag=true;
this.savedMousePos={
x:evt.layerX,
y:evt.layerY
};
});
addEvent(oDiv,'mousemove',function (evt) {
evt.preventDefault();
if (!this.flag) {
return;
}
this.style.left=evt.clientX-this.savedMousePos.x+"px";
this.style.top=evt.clientY-this.savedMousePos.y+"px";
});
addEvent(document,'mouseup',function (evt) {
oDiv.flag=false;
});
};
function addEvent(obj,evt,fn) {
if (obj.addEventListener) {
if (String(window.opera)=="[object Opera]") {
obj.addEventListener(evt,function (evt) {
evt.layerX=evt.offsetX;
evt.layerY=evt.offsetY;
fn.call(this,evt);
},false);
} else {
obj.addEventListener(evt,fn,false);
}
obj.addEventListener(evt,fn,false);
return obj;
}


if (!obj.functions) obj.functions={};
if (!obj.functions[evt])
obj.functions[evt]=[];

//obj.functions["mousedown"]=[]
var functions=obj.functions[evt];
for (var i=0;i<functions.length;i++) {
if (functions[i]===fn) return obj;
}
functions.push(fn);
//fn.index=functions.length-1;


if (typeof obj["on"+evt]=="function") {
//alert(obj["on"+evt]);//当这一行执行到时,obj["on"+evt] 就是handler
//alert(obj["on"+evt]==handler);
if (obj["on"+evt]!=handler)
functions.push(obj["on"+evt]);
}
obj["on"+evt]=handler;
return obj;


}

function handler() {//哪个事件发生了?
//对event对象标准化
var evt=fixEvt(window.event);
var evtype=evt.type;
var functions=this.functions[evtype];
for (var i=0;i<functions.length;i++) {
if (functions[i]) functions[i].call(this,evt);
}
}

function fixEvt(evt) {
evt.target=evt.srcElement;
if (evt.type=="mouseover")
evt.relatedTarget=evt.fromElement;
else if ("mouseout"==evt.type)
evt.relatedTarget=evt.toElement;

evt.stopPropagation=function () {
evt.cancelBubble=true;
};
evt.preventDefault=function () {
evt.returnValue=false;
};
evt.layerX=evt.offsetX;
evt.layerY=evt.offsetY;
evt.pageX = evt.clientX+document.documentElement.scrollLeft;
evt.pageY = evt.clientY+document.documentElement.scrollTop;

return evt;
}
</script>
<style type="text/css">
#oDiv {
width:200px;
height:200px;
border:3px ridge aqua;
background:blue;
position:absolute;
left:100px;
top:100px;
}
#innerDiv {
width:30px;
height:30px;
margin:4px;
border:10px outset yellow;
background:fuchsia;

}
</style>
</head>
<body class="redStyle">
<h1>定位</h1>

<div id="oDiv">

</div>

</body>
</html>
效果看附件:
  • 大小: 8.5 KB
  • 大小: 12.4 KB
分享到:
评论

相关推荐

    JS实现的拖拉缩放效果(实例讲解)

    JS实现的拖拉缩放效果(实例讲解) JS实现的拖拉缩放效果(实例讲解)

    实现div拖拉的js插件

    很强大很牛的实现div拖拉的js插件,主要使用jquery写的,在调用该插件是务必先引用js1.4或js1.6

    简单的js操作div,模拟聊天窗口,实现拖拉控制div高度

    简单的一个js操作div例子,模拟聊天窗口,实现拖拉控制div高度等功能,有需要的可以看看,对谷歌,IE,360,火狐,op都已兼容。

    js拖拉效果.rar

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够实现动态内容、用户交互、页面行为控制等。在本压缩包"js拖拉效果.rar"中,包含的是一个实现拖放(Drag and Drop)效果的示例。...

    jquery的拖拉布局

    jQuery,作为一个强大的JavaScript库,提供了丰富的API来帮助开发者轻松实现拖拽效果,特别是在布局管理上。本文将深入探讨如何利用jQuery实现拖拉布局,并分享相关知识点。 ### 1. jQuery UI中的Draggable和...

    JavaScript 拖拉缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放。 这里也有一个简化...

    js拖拉图片

    js拖拉图片,实现缩放等其他功能,代码可修改,

    QT是实现图片得拖拉功能

    在IT领域,特别是图形用户界面(GUI)开发中,实现拖放(Drag and Drop)功能是一项常见的需求。本文将深入探讨如何使用Qt框架来实现图片的拖放操作,并结合Visio流程图的设计理念,创建一个允许用户自由拼接图片的...

    HTML5 js实现拖拉上传文件功能

    下面我们将详细讨论如何利用HTML5和JavaScript实现拖拉上传文件。 首先,我们需要了解与拖放操作相关的几个事件: 1. `ondragstart`:当用户开始拖动元素时触发,可以在这个事件中设置数据传输对象`dataTransfer`...

    无边框窗口实现拖拉效果

    vc对话框,无边框窗口实现拖拉效果OnNcHitTest,OnSetCursor,OnNcLButtonDown

    javascript拖拉缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放。 跟拖放效果一样,...

    在html拖拉,js实现

    html拖拉js ${item}.ftl"&gt; ('')"&gt; 审批"&gt; 世世代代的 var node = document.querySelector("#szul"); var draging = null; //使用事件委托,将li的事件委托给...

    基于svg的机器学习中-点线等拖拉拽工作流核心svg渲染原理部分demo.zip

    在机器学习领域,为了提升...通过解压并研究"workflow-svg-drag-core-master"中的代码,开发者可以学习到如何使用SVG和JavaScript实现类似的交互式图形应用,这对于提升机器学习项目的人机交互体验有着重要的实际意义。

    自定义Gridview实现拖拉改变顺序

    在某些场景下,如新闻频道管理,用户可能需要能够自由调整各元素的顺序,这时就需要实现自定义的GridView来支持拖放功能。下面将详细讲解如何实现这个功能。 首先,我们需要了解`GridView`的基本用法。`GridView`...

    js实现进度拖拽效果

    js实现进度拖拽效果

    实现鼠标拖拉的简单实例1.0

    标题中的“实现鼠标拖拉的简单实例1.0”指的是一个基本的计算机程序或软件功能,允许用户通过鼠标进行拖放操作。在编程领域,这种功能通常涉及到事件处理和图形用户界面(GUI)的设计。在这个实例中,可能是用某种...

    2+TLZ【源码】数据可视化:基于Echarts+PyQT+Flask实现的动态实时【拖拉拽大屏】-数据中心.zip

    Echarts/PyQT/Flask实现的 动态实时拖拉拽大屏 ,重点的事情说三遍:自定义拖拉拽,自定义拖拉拽,自定义拖拉拽!!! YYDatav的数据可视化大屏《精彩案例汇总》(Python&Echarts源码) ... ...YYDatav的数据可视化大屏...

    dom-drag 今天学了学js里面的拖拉

    标题中的“dom-drag”指的是在JavaScript中实现...通过研究这个压缩包的内容,我们可以学习到JavaScript实现DOM拖放的完整流程,包括事件处理、数据交换和样式调整等关键点,并且能掌握如何在实际项目中运用这些知识。

    react版拖拉拽表单

    本项目"react版拖拉拽表单"正是基于React.js实现的,允许用户通过拖放操作自定义构建表单。在深入探讨这个项目之前,我们先来了解一下React.js的基础知识。 React.js是Facebook开发的一款JavaScript库,用于构建...

    js实现首页拖拽布局效果

    除了基本的JavaScript实现,还可以借助一些库如`interact.js`或`dragula.js`来简化拖拽布局的开发。这些库提供了高级功能,如多元素拖放、拖放组、镜像元素等,能够帮助开发者快速构建复杂的拖拽布局系统。 总的来...

Global site tag (gtag.js) - Google Analytics