js中如何拖动DIV中的图片？
我现在写了个拖动，但是如果在DIV中加上一个一样大小的图片，图片就无法正常拖动了。没有图片的话可以正常使用，本人JS菜鸟，不太明白缘由。所谓的图片无法正常拖动显示为只能拖...
我现在写了个拖动，但是如果在DIV中加上一个一样大小的图片，图片就无法正常拖动了。没有图片的话可以正常使用，本人JS菜鸟，不太明白缘由。
所谓的图片无法正常拖动显示为只能拖动很小一段距离，然后鼠标手势就变成了一个禁止图形，图片不再跟着鼠标移动，这时放开鼠标后图片又跟踪鼠标移动了，但是我需要的是放开鼠标后图片和其父DIV应当不再移动
jQuery.fn.extend({
beDrag : function()
{
var movestart=false;
var x1,y1;
this.mousedown(function(){
movestart=true;
x1 = event.offsetX;
y1 = event.offsetY;
});
$(document).mouseup(function(e){
movestart=false;
});
$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");}
})
}
})
$("#id1").beDrag();
---------------------------------
<body>
<div id="id1" onclick="alert('1')">
<img width="100px" height="100px" src="../CustomFace/46/30/1000000030_1.jpg" />
</div>
</body> 展开
所谓的图片无法正常拖动显示为只能拖动很小一段距离，然后鼠标手势就变成了一个禁止图形，图片不再跟着鼠标移动，这时放开鼠标后图片又跟踪鼠标移动了，但是我需要的是放开鼠标后图片和其父DIV应当不再移动
jQuery.fn.extend({
beDrag : function()
{
var movestart=false;
var x1,y1;
this.mousedown(function(){
movestart=true;
x1 = event.offsetX;
y1 = event.offsetY;
});
$(document).mouseup(function(e){
movestart=false;
});
$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");}
})
}
})
$("#id1").beDrag();
---------------------------------
<body>
<div id="id1" onclick="alert('1')">
<img width="100px" height="100px" src="../CustomFace/46/30/1000000030_1.jpg" />
</div>
</body> 展开
2个回答
展开全部
实现思路：
①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离
用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
drag.js代码：
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
//拖拽的实现
var startDrag = function(bar, target, callback){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防止IE文字选中
bar.onselectstart = function(){
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function(){
params.flag = false;
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
};
document.onmousemove = function(event){
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
}
if (typeof callback == "function") {
callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
}
}
};HTML/CSS
<style type="text/css">
#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
</style>
<div id="box">
<div id="main">
<div id="bar">拖拽</div>
<div id="content">
内容……
</div>
</div>
</div>
JS部分
<script src="drag.js" type="text/javascript"></script>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag(oBar, oBox);
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码放出来看看
是不是冒泡和捕获的问题
试试简单的，看看点击图片时 div上的onclick事件有没有被触发
// 看起来是使用 jquery ,代码贴完整些吧，
this.mousedown(function(){
中this是指向什么对象都没看出来
//加一个 return false
//另外 event.offsetX 并不兼容 firefox
$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");
return false;
}
})
是不是冒泡和捕获的问题
试试简单的，看看点击图片时 div上的onclick事件有没有被触发
// 看起来是使用 jquery ,代码贴完整些吧，
this.mousedown(function(){
中this是指向什么对象都没看出来
//加一个 return false
//另外 event.offsetX 并不兼容 firefox
$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");
return false;
}
})
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
