请教拖拽图片的实现思路 不考虑flash在页面上拖拽,比如类似于下棋移动棋子一样。放开的时候定位在可以放置的位置上。请教思路 js应该做的到 谢谢 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 就是控制鼠标事件,mousedown,mouseup,mouseover在鼠标按下事件中设置“开始移动了”,在鼠标抬起事件中设置“不进行移动”。在鼠标移动事件中判断是否“开始移动了”,是的话就取鼠标XY位置来动态设置图片的位置实现拖拽图片效果。另外,在鼠标抬起事件中判断是否可以放下,如果可以放下,就把图片的位置设为目标的位置即可,反之则还原图片原来的位置。 事件是图片对象的。而且图片对象的CSS应该设为绝对定位,这样才能移动。 是不是说将图片放入一个div中,而这个div要设为绝对定位?关于坐标的话,可否以父层的div左上角来作为坐标计算的原点? 图片对象的CSS应该设为绝对定位,图片的CSS应该设为绝对定位 如果你想这样实现的话 那就需要 鼠标的 down和up事件要放在div上 而不是图片上了父层div position:relative;图片所在div position:absolute; <body><div id="div" style='height:100px;width:100px;border:1px solid #000;position:absolute'></div><script type="text/javascript">function bind(){ if (!Function.prototype.bind) { Function.prototype.bind = function(obj) { var owner = this, args = Array.prototype.slice.call(arguments), callobj = Array.prototype.shift.call(args); return function(e) { e = e || top.window.event || window.event; owner.apply(callobj, args.concat([e])); }; }; }}var drag = function(){ var startX , startY , objX , objY , moveX , moveY; var parent = this; bind() var down = function(e) { e = e || window.event; startX = e.clientX; startY = e.clientY; objX = parent.offsetLeft; objY = parent.offsetTop; moveX = startX - objX; moveY = startY - objY; if(!document.addEventListener) this.setCapture(); document.onmousemove = move; document.onmouseup = up.bind(this) if(e.stopPropagation) e.stopPropagation() else e.cancelBubble = true if(e.preventDefault) e.preventDefault() else e.returnValue = false } var move = function(e) { e = e || window.event; startX = e.clientX; startY = e.clientY; parent.style.left = startX - moveX + "px"; parent.style.top = startY - moveY + "px"; if(e.stopPropagation) e.stopPropagation() else e.cancelBubble = true if(e.preventDefault) e.preventDefault() else e.returnValue = false } var up = function(e) { document.onmousemove = null; if(!document.addEventListener) this.releaseCapture(); if(e.stopPropagation) e.stopPropagation() else e.cancelBubble = true if(e.preventDefault) e.preventDefault() else e.returnValue = false } this.onmousedown = down;}this.drag.call(document.getElementById("div"))</script></body> gogogo#23 效果 尤溪 ,very good 呀 参数一为要拖拽的元素,二为事件function(elementToDrag,event){var startX=event.clientX,startY=event.clientY;var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;var deltaX=startX-origX,deltaY=startY-origY;if(document.addEventListener){document.addEventListener("mousemove",moveHandler,true);document.addEventListener("mouseup",upHandler,true);}else if(document.attachEvent){elementToDrag.attachEvent("onmousemove",moveHandler);elementToDrag.attachEvent("onmouseup",upHandler);//事件捕获失败的时候调用upHandler方法elementToDrag.attachEvent("onlosecapture",upHandler);}else{document.onmousemove=moveHandler;document.onmouseup=upHandler;}if(event.stopPropagation) event.stopPropagation();else event.cacelBubble=true;if(event.preventDefault) event.preventDefault();else event.returnValue=false;function moveHandler(e){if(!e) e=window.event;elementToDrag.style.left=(e.clientX-deltaX)+"px";elementToDrag.style.top=(e.clientY-deltaY)+"px";if(e.stopPropagation) e.stopPropagation();else e.cancelBubble =true;}function upHandler(e){if(!e) e=window.event;if(document.removeEventListener){document.removeEventListener("mouseup",upHandler,true);document.removeEventListener("mousemove"moveHandler,true);}else if(document.detachEvent){elementToDrag.detachEvent("onlosecapture",upHandler);elementToDrag.detachEvent("onmouseup",upHandler);elementToDrag.detachEvent("onmousemove",moveHandler);elementToDrag.releaseCapture;}else{document.onmouseup=olduphandler;document.onmousemove=oldmovehandler;}if(e.stopPropagation) e.stopPropagation();else e.cancelBubble=true;}} 9楼写的那个不完整...这个实验通过...function drag(elementToDrag,event){var startX=event.clientX,startY=event.clientY;var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;var deltaX=startX-origX,deltaY=startY-origY;if(document.addEventListener){document.addEventListener("mousemove",moveHandler,true);document.addEventListener("mouseup",upHandler,true);}else if(document.attachEvent){elementToDrag.setCapture();elementToDrag.attachEvent("onmousemove",moveHandler);elementToDrag.attachEvent("onmouseup",upHandler);//事件捕获失败的时候调用upHandler方法elementToDrag.attachEvent("onlosecapture",upHandler);}else{var oldmovehandler =document.onmousemove;var olduphandler=document.onmouseup;document.onmousemove=moveHandler;document.onmouseup=upHandler;}if(event.stopPropagation) event.stopPropagation();else event.cacelBubble=true;if(event.preventDefault) event.preventDefault();else event.returnValue=false;function moveHandler(e){if(!e) e=window.event;elementToDrag.style.left=(e.clientX-deltaX)+"px";elementToDrag.style.top=(e.clientY-deltaY)+"px";if(e.stopPropagation) e.stopPropagation();else e.cancelBubble =true;}function upHandler(e){if(!e) e=window.event;if(document.removeEventListener){document.removeEventListener("mouseup",upHandler,true);document.removeEventListener("mousemove",moveHandler,true);}else if(document.detachEvent){elementToDrag.detachEvent("onlosecapture",upHandler);elementToDrag.detachEvent("onmouseup",upHandler);elementToDrag.detachEvent("onmousemove",moveHandler);elementToDrag.releaseCapture();}else{document.onmouseup=olduphandler;document.onmousemove=oldmovehandler;}if(e.stopPropagation) e.stopPropagation();else e.cancelBubble=true;}} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Drag</title><style>* { font-size:12px; font-family:Verdana,宋体; }html { margin:0px; padding:0px; overflow:auto; }body { margin:0px; padding:15px; background-color:buttonface; }#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }</style></head><body><div id="w"> <div id="t">Demo Win - Drag me</div> <div id="winBody">Hello world</div></div></body><script>(function(o,s,x,y,d){ s = o.style; d = document; o.onselectstart = function(){ return false; }; //阻止选择 o.onmousedown = function(e){ e = e||event; x = e.clientX-o.offsetLeft; y = e.clientY-o.offsetTop; d.onmousemove = function(e){ e = e||event; s.left = e.clientX - x + "px"; s.top = e.clientY - y + "px"; } d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; } }})(document.getElementById("w"))</script></html> firefox 下的js提交不执行的bug 在线等ing…… js比较难的问题? JavaScript 树形结构问题 页面长时间无操作,提前提示即将退出登录,如何实现? 滚动条问题,今晚在这等了!! 怎么把截取一个网站(址)的输出,怎么分析输出的内容? 怎么实现运行代码功能? 谁能提供JAVASCRIPT可调用的WINDOWS公用函数接口的资料... 这个效果 JQuery, prevf() 上一个 的方法对的, 下一个按钮会跳一下, 前面空白,怎么处理这个方法 求助,vue动态绑定src,内容渲染上去了但是没有效果 JS控制DIV显示与隐藏问题 如何给方法传递对象【在动态添加时间的过程中】
在鼠标按下事件中设置“开始移动了”,在鼠标抬起事件中设置“不进行移动”。
在鼠标移动事件中判断是否“开始移动了”,是的话就取鼠标XY位置来动态设置图片的位置实现拖拽图片效果。
另外,在鼠标抬起事件中判断是否可以放下,如果可以放下,就把图片的位置设为目标的位置即可,反之则还原图片原来的位置。
关于坐标的话,可否以父层的div左上角来作为坐标计算的原点?
如果你想这样实现的话 那就需要 鼠标的 down和up事件要放在div上 而不是图片上了父层div position:relative;图片所在div position:absolute;
<div id="div" style='height:100px;width:100px;border:1px solid #000;position:absolute'></div>
<script type="text/javascript">
function bind()
{
if (!Function.prototype.bind)
{
Function.prototype.bind = function(obj)
{
var owner = this,
args = Array.prototype.slice.call(arguments),
callobj = Array.prototype.shift.call(args);
return function(e)
{
e = e || top.window.event || window.event;
owner.apply(callobj, args.concat([e]));
};
};
}
}
var drag = function()
{
var startX , startY , objX , objY , moveX , moveY;
var parent = this;
bind()
var down = function(e)
{
e = e || window.event;
startX = e.clientX;
startY = e.clientY;
objX = parent.offsetLeft;
objY = parent.offsetTop;
moveX = startX - objX;
moveY = startY - objY;
if(!document.addEventListener) this.setCapture();
document.onmousemove = move;
document.onmouseup = up.bind(this)
if(e.stopPropagation) e.stopPropagation()
else e.cancelBubble = true
if(e.preventDefault) e.preventDefault()
else e.returnValue = false
}
var move = function(e)
{
e = e || window.event;
startX = e.clientX;
startY = e.clientY;
parent.style.left = startX - moveX + "px";
parent.style.top = startY - moveY + "px";
if(e.stopPropagation) e.stopPropagation()
else e.cancelBubble = true
if(e.preventDefault) e.preventDefault()
else e.returnValue = false
}
var up = function(e)
{
document.onmousemove = null;
if(!document.addEventListener) this.releaseCapture();
if(e.stopPropagation) e.stopPropagation()
else e.cancelBubble = true
if(e.preventDefault) e.preventDefault()
else e.returnValue = false
}
this.onmousedown = down;
}this.drag.call(document.getElementById("div"))
</script>
</body>
#23 效果
var startX=event.clientX,startY=event.clientY;var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;var deltaX=startX-origX,deltaY=startY-origY;
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
//事件捕获失败的时候调用upHandler方法
elementToDrag.attachEvent("onlosecapture",upHandler);
}
else{
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}if(event.stopPropagation) event.stopPropagation();
else event.cacelBubble=true;if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e){
if(!e) e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble =true;
}function upHandler(e){
if(!e) e=window.event;
if(document.removeEventListener){document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove"moveHandler,true);
}
else if(document.detachEvent){
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.releaseCapture;
}
else{
document.onmouseup=olduphandler;
document.onmousemove=oldmovehandler;
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;}}
var startX=event.clientX,startY=event.clientY;var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;var deltaX=startX-origX,deltaY=startY-origY;
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
//事件捕获失败的时候调用upHandler方法
elementToDrag.attachEvent("onlosecapture",upHandler);
}
else{
var oldmovehandler =document.onmousemove;
var olduphandler=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}if(event.stopPropagation) event.stopPropagation();
else event.cacelBubble=true;if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e){
if(!e) e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble =true;
}function upHandler(e){
if(!e) e=window.event;
if(document.removeEventListener){document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else if(document.detachEvent){
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.releaseCapture();
}
else{
document.onmouseup=olduphandler;
document.onmousemove=oldmovehandler;
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;}}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Drag</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Drag me</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,s,x,y,d){
s = o.style;
d = document;
o.onselectstart = function(){ return false; }; //阻止选择
o.onmousedown = function(e){
e = e||event;
x = e.clientX-o.offsetLeft;
y = e.clientY-o.offsetTop;
d.onmousemove = function(e){
e = e||event;
s.left = e.clientX - x + "px";
s.top = e.clientY - y + "px";
}
d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }
}
})(document.getElementById("w"))
</script>
</html>