很久不写代码了,一直不是做管理,不是招聘面试,再就是写方案
技术都有些生了,今天正好安排了一个protal的定制任务下去,自己也顺手看了看.
有一个做好的库,叫dom-drag.js,封装得不错,打开看了一下例子,刚开始有几个问题一直没有理解,花了一个多小时,总算都搞明白了,把想明白的地方写下来:
<html>
<head>
<title> - cropper - </title>
<style type="text/css">
<!--
#pbox {
width:300px; height:300px;
overflow:hidden;
}
.opacity{filter: alpha(opacity=60)}
-->
</style>
<script language="javascript" src="dom-drag.js"></script>
<script language="javascript">
var oThang, oHandle, reportBox, iReportCount = 0;
window.onload = function() {
if (document.all || document.getElementById)
{
oThang = document.all ? document.all["thang"] : document.getElementById("thang")
oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
oReport = document.all ? document.all["report"] : document.getElementById("report")
Drag.init(oHandle, oThang, -250, 150, -250, 150);
// report stuff
oThang.onDrag = function(x, y) { reportDrag("", x, y); }
}
function reportDrag(who, x, y) {
oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
}
oThang.onDrag(-250, -250);
}
</script>
</head>
<body>
<div style="width:300px; height:300px; overflow:hidden; top:20px; left:20px;">
<img src="snare_pic_large-300.jpg" />
<div id="thang" style="position:absolute; left:-250px; top:-250px;">sdfs
<img class="opacity" style="position:absolute; left:0px; top:0px;" src="selection2.gif" />
<img id="handle" style="position:absolute; left:250px; top:250px; width:100px; height:100px;" src="x.gif" />
</div>
</div>
<input type="text" id="report" style="width:300px;" />
</body>
</html>
1)在cropper.html中的最外层的div上加了overflow:hidden,如果去掉的话,就对不齐了,这是因为,最外层的div是相对的,相对于body的,而里面的div thang是绝对定位的,会参考上一个绝对定位的父对象,也就是body,而不是最外层的div,所以,如果加上overflow:hidden以后,div thang就会参考最外层的div,但是具体为什么我不是很清楚,只是知道就是这样一个效果,针对绝对定位的div有效,如果把最外的div改成绝对定位的话,就不需要overflow:hidden了
2)cropper.html是起到了个蒙板的效果,中间有一个100*100的透明窗,可以看到后面的图,这个透明窗是selection2.gif提供的,开始,我以为这个文件也就是100*100的,而其位置是绝对定位到0,0,这样的话,会相对其上一个绝对定位的父对象,也就是div thang,而div thang却定位到-250,-250,这样的话,不就是看不见了吗?想了十分钟才解决,原来selection2.gif居然是600*600的,这真是一个不是问题的问题,一下子就解决了.
记下来免得以后忘记了,dom-drag封装得还是不错的,只是后面的几个参数
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper,读了一下程序,是只能垂直移动和水平移动,而fXMapper和fYMapper是做坐标转换的,觉得应该是传两个function进去的.
分享到：
相关推荐
在前端开发领域，D3.js（Data-Driven Documents）是一个强大的JavaScript库，它允许开发者用数据来操作DOM（Document Object Model）。"前端项目-d3-drag.zip" 是一个基于D3.js实现的拖放功能的项目，特别关注的是D3...
在JavaScript中，可以使用DOM（Document Object Model）API来操作SVG元素。例如，可以创建`<svg>`元素，然后在其内部添加`<circle>`（表示点）和`<line>`（表示连接线）等元素。事件监听器如`mousedown`、`mousemove...
这是一个 Polymer 元素，它使任何 DOM 元素都可以拖动和调整大小。 用法 从 bower 安装组件： bower install drag-resize 将组件插入您的页面： < link rel =" import " href =" drag-resize.html " > 在...
在Vue.js框架中实现一个可拖拽的树形表格是一项技术挑战，涉及到组件设计、事件处理、数据管理和DOM操作等多个方面。Vue.js以其简洁的API和强大的响应式系统深受开发者喜爱，而添加拖拽功能则需要用到HTML5的Drag ...
总的来说，"菜单拖拉（图片的拖拉）.zip"项目展示了HTML5的拖放API、CSS3的交互样式以及JavaScript的DOM操作在构建动态Web应用中的重要作用。通过学习和理解这些技术，开发者能够创建更加生动、用户友好的网页应用。
避免不必要的DOM操作，使用事件代理，以及在拖动过程中暂停动画和定时器，都可以显著提升页面性能。 总结，jQuery的拖拉布局能力为开发者提供了丰富的工具，可以实现各种复杂的用户交互场景。通过理解和应用这些...
然后在`js`目录下的脚本文件（如`script.js`）中，编写jQuery拖拉逻辑： ```javascript $(document).ready(function() { var dragItem = $('#draggable'); var initialPos = {x: 0, y: 0}; dragItem.mousedown...
在IT行业中，拖拉操作（Drag and Drop）是一种常见的用户交互方式，特别是在图形用户界面（GUI）中。拖拉树节点的例子通常涉及到数据结构中的树形表示，以及使用编程语言实现拖放功能。这里我们将深入探讨这个主题，...
在IT行业中，窗口的拖拉拽功能是一种常见的交互设计，特别是在网页应用和桌面软件中。这一功能使得用户可以通过鼠标操作轻松移动窗口的位置，提升用户体验。本篇将详细讲解如何使用jQuery实现窗口拖动功能，以及相关...
拖拉拽技术是用户界面设计中的一个重要组成部分，它允许用户通过鼠标或其他输入设备将元素从一个位置移动到另一个位置，增强了交互性和用户体验。在计算机软件、网页应用甚至移动应用中，拖放功能广泛用于文件管理、...
本话题主要围绕`DIV`元素的拖拉大小和移动位置来展开，涉及到的技术主要是JavaScript，特别是ECMAScript的相关特性，以及一个名为`interact.js`的库。 `DIV`是HTML中的一个常用布局元素，它允许开发者通过CSS定义...
2. **事件处理**：为了实现拖放功能，开发者需要监听并处理一系列的事件，如`mousedown`（鼠标按下）、`mousemove`（鼠标移动）、`mouseup`（鼠标释放）以及`dragstart`、`drag`、`dragend`等拖放特定事件。...
总的来说，JavaScript 拖拉缩放效果的实现需要深入理解鼠标事件处理、CSS布局以及动态修改DOM元素属性。通过不断实践和优化，我们可以创造出更符合用户需求的交互体验，让网页和应用程序更加生动和易用。
它通过JavaScript创建XMLHttpRequest对象，发送异步请求到服务器，获取数据后在客户端更新DOM（文档对象模型），从而实现页面的动态更新。 在拖放功能中，HTML5引入了`drag`和`drop`事件，使得在浏览器中实现拖放...
在Vue.js中，实现简单的拖拽效果主要依赖于自定义指令（Custom Directive）以及JavaScript的事件监听机制。本文将详细解析如何使用Vue自定义指令来创建一个具备拖拽功能的元素，包括横向拖动、纵向拖动以及任意方向...
在Vue.js中，实现这样的交互功能需要对事件监听、数据绑定、组件状态管理和DOM操作有深入理解。通常，拖拽功能的实现会用到HTML5的拖放API（Drag and Drop API），或者是第三方库如vuedraggable。 标签"Vue-Gantt-...
在IT行业中，网页拖拽功能已经成为...这个过程涉及到了前端开发的多个方面，包括DOM操作、事件处理、样式控制以及与服务器的交互。对于开发者来说，理解这些技术并能熟练运用是构建现代化、交互性强的网页应用的关键。