展开全部
很简单 需要三个事件 onmousedown onmousemove onmouseup
并给需要拖动的节点增加一个属性叫droping(这个属性表示节点是不是正处于拖拽状态)下面给出一份演示
onmousedown 控制节点扩展的属性droping为true(表示可以移动节点了)
onmousemove 控制节点的位置(判断是否可以移动如果是就移动)
ommouseup控制节点的扩展属性为false(表示不能移动节点了)
<!DOCTYPE HTML>
<html>
<head>
<title>演示</title>
<style type="text/css">
</style>
</head>
<body>
<div id="dropDiv">
我可以拖动
</div>
<script type="text/javascript">
function dropDivFun(Element){
//设置节点的定位为fixed
Element.style.position="fixed";
//获取事件对象函数 方便获取事件的clientX
function getEvent(){
if(event){
e=event;
}else if(window.event){
e=window.event;
}else{
e=arguments.callee.arguments[0];
}
return e;
}
//添加mousedown事件
Element.addEventListener("mousedown",function(){
var e=getEvent();
if(!Element.droping){
//设置droping为true并记录初始的位置
Element.droping=true;
Element.start_x=e.clientX-Element.offsetLeft;
Element.start_y=e.clientY-Element.offsetTop;
}
});
Element.addEventListener("mousemove",function(){
var e=getEvent();
//移动节点
if(Element.droping){
Element.style.left=e.clientX-Element.start_x+"px";
Element.style.top=e.clientY-Element.start_y+"px";
}
});
Element.addEventListener("mouseup",function(){
if(Element.droping){
//设置droping为false并释放初始的变量
Element.droping=false;
Element.start_x=null;
Element.start_y=null;
}
});
}
//为节点添加drop事件
dropDivFun(document.getElementById("dropDiv"));
</script>
</body>
</html>
该演示演示了使用原生js给节点拖动
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
绑定点击事件，onmousedown/ontouchstart的时候记录鼠标点击的位置pageX、pageY，然后绑定移动事件onmousemove/ontouchmove，获得此时的pageX、pageY，然后与初始位置相减，得到差值a,b，更改元素的transformX(a),transformY(b)，到此时就实现了移动，onmouseup/ontouchend之后获得最终的位置，再进一步操作就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
mousedown+mousemove 然后根据clientX和clientY判断鼠标位置以确定拖拽距离
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>event事件</title>
<style type="text/css">
#box{width: 100px;height: 100px; background-color: red;position: absolute;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById('box');
var ww=document.documentElement.clientWidth;
var ww1=document.documentElement.clientHeight;
box.onmousedown=function (ev) {
var ev=ev||window.event;
var a=ev.clientX-box.offsetLeft;
var b=ev.clientY-box.offsetTop;
document.onmousemove=function (ev) {
var ev=ev||window.event;
var c=ev.clientX-a;
var d=ev.clientY-b;
if(c<=0){
c=0;
}
//if (a>=ww-box.clientWidth) {
// c=ww-box.clientWidth;
// }
if (d<=0) {
d=0;
}
// if (b>=ww1-box.clientHeight) {
// d=ww1-box.clientHeight;
// }
box.style.left=c+'px';
box.style.top=d+'px';
}
}
box.onmouseup=function () {
document.onmousemove=null;
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" style='width:336px;height:69px;border: 1px solid gray;' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" style='width:300px;height:50px;border: 1px solid gray;' draggable="true" ondragstart="drag(event)"> </div>
</body>
</html>
参照http://www.w3school.com.cn/html5/html_5_draganddrop.asp
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
