要求:
1.整个拖动层任何地方都可以拖动
2.当鼠标放在拖动层里的图片上拖动是,不能有粘性;
3。当拖动层里面内容为空,只有高度宽度属性时也可以拖动。牛人帮下忙哈,谢谢!!!
1.整个拖动层任何地方都可以拖动
2.当鼠标放在拖动层里的图片上拖动是,不能有粘性;
3。当拖动层里面内容为空,只有高度宽度属性时也可以拖动。牛人帮下忙哈,谢谢!!!
解决方案 »
- Extjs4.0自定义校验终极问题
- window.open打开页面总是会变成页面下载,怎么办?
- 范围选择,这样的滑动条用JavaScript有可能实现吗?
- 程序员身边的知己——陪伴在我们周围的编程用书(php/net)
- 难道没有真正的页面全频显示的方法吗??
- Ext.Net关于雷达图Radar的配置问题,在线等解答!!!
- xmlhttp和javascript结合的问题
- XmlHttp 如何Sumit 整个Form,就象 form.submit() 一样
- 怎么实现网页全屏幕显示,怎么实现网页广告条网页刷新随机更换?
- 怎样提交或OPEN()刷新IFAME页面
- 急,请问css的dom在javascript中的写法:
- 动态替换的问题
<HTML>
<HEAD>
<TITLE>标题 </TITLE>
<style>
.div {
font: 9pt 宋体;
position:absolute;
}
.msg {
height: 500px;
overflow: scroll;
}
th{
cursor: default;
background-color: blue;
color: white;
}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
function moveLayer(){
var uddiv = document.getElementById('detail');
onMsgMove(uddiv);
}function onMsgMove(divObj){
var mx = event.clientX - parseInt(divObj.style.left);
var my = event.clientY - parseInt(divObj.style.top);
divObj.setCapture();
divObj.onmousemove = mousemove;
divObj.onmouseup = mouseup;
function mousemove(){
var x = event.clientX;
var y = event.clientY;
divObj.style.left = x - mx;
divObj.style.top = y - my;
}
function mouseup(){
divObj.releaseCapture();
divObj.onmousemove = function(){};
divObj.mouseup = function(){};
}
}
</SCRIPT> </HEAD>
<body><div id="detail" style="position:absolute; width:500; top:0; left:0; z-index:10;">
<table style="border: solid 1px #000000; width:500;">
<tr>
<th id="detailTitle" onmousedown="moveLayer()" width="480">Title</th>
<th width="20"></th>
</tr>
<tr>
<td id="detailHTML" style="background-color: #aaaadd;" colspan="2">Text</td>
</tr>
</table>
</div>
</body>
</HTML>
http://www.sharejs.com/cat-133.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 拖动插件</title>
<style type="text/css">
.asfmanDrag{
width:100px;
height:100px;
background-color:#FFFFCC;
border: #FF9900 1px solid;
}#asfmanDrag{
width:400px;
background-color:#FFFFCC;
text-align:center;
border: #FF9900 1px solid;
}
#DragAble{}
#Handle{
width:200px;
height:20px;
background-color:#FFFFCC;
border: #FF9900 1px solid;
}
#DragAbleContent{
width:200px;
height:60px;
background-color:#33CCFF;
border:#0033FF 1px solid;
}
.DragAble{}
.DragAble #Handle{
width:200px;
height:20px;
background-color:#FFFFCC;
border: #FF9900 1px solid;
}.DragAble #DragAbleContent{
width:200px;
height:60px;
background-color:#33CCFF;
border:#0033FF 1px solid;
}
</style>
</head>
<body>
<li>这是一个网上一个朋友提供的Jquery拖动插件:(<a href="http://bbs.51js.com/viewthread.php?tid=75100" target="_blank">原文地址</a>)</li>
<div style="width:500px; height:800px; border:#0066FF 1px solid;">
<div class="asfmanDrag"></div>
<div id="asfmanDrag">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">
</div>
<div class="asfmanDrag"></div>
<div id="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">1 text~~</div>
</div>
<div class="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">2 text~~</div>
</div>
<div class="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">3 text~~</div>
</div>
</div>
<div style="height:600px;border:#0066FF 1px solid; text-align:center;">
<div style="width:400px; height:400px;border:#0066FF 1px solid; text-align:left; margin-top:150px; margin-left:150px;">
<div class="asfmanDrag"></div>
<div class="DragAble">
<div id="Handle"></div>
<div id="DragAbleContent">2 text~~</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
(function(){
//jquery插件:拖动元素。
//原作者:prodigynonsense
//修改者:Esoul
// 添加了一个参数:handle,接收dom元素作为可拖动元素的手柄。
//插件发布原地址:http://bbs.51js.com/viewthread.php?tid=75100
//注意:不要直接给margin值,可以放在其他的容器里面设定位置。否则元素会出现跳动现象。
jQuery.extend({zIndex : 0});
jQuery.fn.extend({
asfmanDrag : function(handle,callback,func)
{
this.each(function(){
this.posRange = {minX:0,minY:0,maxX:(document.compatMode == "CSS1Compat"?document.documentElement.clientWidth:document.body.clientWidth),maxY:(document.compatMode == "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight)};
var oHandle = $(this).find(handle);
var _this = this;
function ExecuteMousedown(e){
_this.style.zIndex = $.zIndex++;
_this.style.position = "absolute";
_this.drag(e,callback,func);
}
if(oHandle.length>0){
oHandle.mousedown(ExecuteMousedown);
}else{
_this.onmousedown = ExecuteMousedown;
}
this.drag = function(e,callback,func)
{
var element = this,ev = e || window.event;
ev.rScreenX = ev.screenX;
ev.rScreenY = ev.screenY;
var pos = $(this).offset();
element.dragConfig = {defaultX : parseInt(pos.left,10),defaultY : parseInt(pos.top,10),defaultW: parseInt($(this).width(),10),defaultH : parseInt($(this).height(),10)};
document.onmouseup = function()
{
element.drop();
callback && callback();
};
document.onmousemove = function(e)
{
var ev2 = e || window.event;
if($.browser.msie&& ev2.button!=1)
{
return (element.drop(),callback && callback());
}
var mx = element.dragConfig.defaultX + (ev2.screenX - ev.rScreenX),
my = element.dragConfig.defaultY + (ev2.screenY - ev.rScreenY),
pr = element.posRange,mw = element.dragConfig.defaultW,mh = element.dragConfig.defaultH;
with(element.style)
{
/* //原作者意图使得拖动元素不会超出边界,但是在上面的例子中存在跳动问题。
left = (mx<pr.minX?pr.minX:((mx+mw)>pr.maxX?(pr.maxX-mw):mx)) + "px";
top = (my<pr.minY?pr.minY:((my+mh)>pr.maxY?(pr.maxY-mh):my)) + "px";
*/
left = mx + "px";
top = my + "px";
}
func && func();
return false;
};
document.onselectstart = function(){return false;};
};
this.drop = function()
{
document.onmousemove = document.onselectstart = document.onmouseup = null;
};
});
}
});//使用插件:
$(".asfmanDrag").asfmanDrag();
$("#asfmanDrag").asfmanDrag();
$("#DragAble").asfmanDrag("#Handle");
$(".DragAble").asfmanDrag("#Handle");
})();
</script>
http://jqueryui.com/demos/draggable/#default
var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件触发对象
obj.setCapture() //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex //获取对象的z轴坐标值
//设置对象的z轴坐标值为100,确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true //布尔值,判断鼠标是否已按下,true为按下,false为未按下
} function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(down&&event.srcElement==obj){
with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/ posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-y
}
}
} function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
</script>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">
<img src="http://avatar.profile.csdn.net/9/B/A/2_ldii3.jpg">
</div>