javascript 拽拉效果供JS初学者学习参考

　　不过这里未使用事件捕捉和释放,呵呵~

<!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=utf-8" /> 
<title>JS_拽拉效果_管理资源吧</title> 
<style type="text/css"> 
div{position:absolute;width:200px;height:100px;background:#FFFADC;border:1px solid #CC6600;} 
</style> 
</head> 
<body> 
<div id="idid"></div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20idid%20%3D%20document.getElementById('idid')%3B%20%0D%0Aidid.onmousedown%20%3D%20function(bbb)%7B%20%0D%0A%20%20%20%20if(!bbb)bbb%3Dwindow.event%3B%20%0D%0A%20%20%20%20var%20ox%20%3D%20bbb.layerX%3Fbbb.layerX%3Abbb.offsetX%3B%20%0D%0A%20%20%20%20var%20oy%20%3D%20bbb.layerY%3Fbbb.layerY%3Abbb.offsetY%3B%20%0D%0A%20%20%20%20idid.onmousemove%20%3D%20function(ccc)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(!ccc)ccc%3Dwindow.event%3B%20%0D%0A%20%20%20%20%20%20%20%20idid.style.left%20%3D%20ccc.clientX%20-%20ox%20%2B%20'px'%3B%20%0D%0A%20%20%20%20%20%20%20%20idid.style.top%20%3D%20ccc.clientY%20-%20oy%20%2B%20'px'%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20idid.onmouseup%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20idid.onmousemove%20%3D%20null%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程

javascript 拽拉效果 供JS初学者学习参考

javascript 拽拉效果供JS初学者学习参考