javascript drag&drop beginning
首先我不赞成自己实现拖拽功能,因为比较麻烦,
建议用当下比较流行的一些库,用什么那就看项目需要了,
但是即便用别人的东西也只至少知道原理,所以我们先看看原理吧
如果想自己手动实现拖拽,那么我们先看看都要有哪些工作要做。
1 至少要获得鼠标的坐标吧,不然还干个屁。
2 至少要获得鼠标的动作吧,不然我怎么知道什么时候拖。什么时候停
3 在页面上拖动一个目标实际上就是,改变某个标签的坐标,当然一般也要适当改变
也些样式。所以你至少要知道一些css方面的知识。
1 鼠标坐标:look:
function mouseCoords(ev){
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
唯一要解释的就是型参ev:ev实际就是windows.even:
调用这个函数:
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
} // mousePos.x就是横坐标,mousePos.y就是纵坐标
好了,就到这吧。
2 复习一下doument下面的都鼠标动作吧(当然只列出我们用的到的)
onmousedown:当焦点停留在当前元素上并且按下鼠标键时触发
onmousemove:当光标在当前元素上并且光标在当前元素上面移动时触发
onmouseout:当光标移出某个元素时触发
onmouseover:当贯标移动到某个元素上面时触发
onmouseup:当焦点在当前元素上并松开鼠标键时触发
下一步:搞清楚流程:
拖拽的流程:
捕获鼠标按下动作,之后判断鼠标按下所在的坐标是不是你想要的DOM对象,
如果是那么让这个对象的坐标跟着鼠标移动而改变,直到鼠标松开(onmouseup)。
根据这个流程,我们第一步要先把我们想要移动的DOM对象
记录下拉,而且我们必须把这个对象的style position
设置为absolute。
//定义监听函数
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
//存放我们想要拖动的DOM对象
var dragObject = null;
var mouseOffset = null;
function mouseMove(ev){
ev = ev || window.event;
//这里用到了上面第一点写的函数(mouseCoords)
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y;
dragObject.style.left = mousePos.x;
return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
这段代码的意思就是告诉浏览器页面上的哪些元素可以被拖动。
然后如果捕获的元素是允许被拖动的(即鼠标所在的区域
是这个元素的范围内),那么这个元素的坐标就
随着鼠标变化,直到鼠标弹起。
那么为了让鼠标知道哪些元素可以被拖动,我们需要制作
一个容器,盛放这些元素,并且写一个注册函数,把可以拖动
的元素注册到容器中:
var dropTargets = [];
function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}
function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
for(var i=0; i<dropTargets.length; i++){
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);
if(
(mousePos.x > targPos.x) &&
(mousePos.x < (targPos.x + targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}
dragObject = null;
}
所以如果你使用javascript lib,那么如果给某个元素增加拖动
属性,那么一般都可以捕获到 up 和 down事件,并可以在这些
事件中增加自己的动作。
分享到:
相关推荐
而且我已经把windows和linux的vmtools包,以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来,欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) ...
使用Drag&Drop接受文件名的输入框(13KB)
而且我已经把windows和linux的vmtools包,以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来,欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) ...
Window下拖放操作Drag & Drop 全解析
NULL 博文链接:https://mingren135.iteye.com/blog/2095635
Drag & drop source code android
很不错的drag & drop,类似于igoogle,在个人主页上都用得上,没有设置保存功能,有兴趣的朋友可以自己试一下
WPF 实现了两个listbox之间拖动,drag&drop,并且有上下按钮控制listbox里面元素的移动,还有拖动时边框变色,1分,你值得拥有。
Enhanced Drag & Drop(3KB)
【类库与框架】★★★★★-DragKit - an iOS framework for enabling drag & drop【类库与框架】★★★★★-DragKit - an iOS framework for enabling drag & drop 1.适合学生学习研究参考 2.适合个人学习研究参考 3...
IOS应用源码之【类库与框架】DragKit - an iOS framework for enabling drag & drop behavior
IOS应用源码之【类库与框架】-DragKit - an iOS framework for enabling drag & drop behavior.rar
eclipse rcp 关于拖动的文档,里面也有代码例子,但不是完整demo
JavaScript
wpf拖拽移动列表项的功能,两个datagrid中可以互相拖拽并移动一行数据
基于 Windows Shell 的拖放支持,跨应用。
一个不错的示例,自己也收藏一下.
Ole Drag and Drop Example.
JavaScript