一个简单的拖放有关问题
日期：2014-05-16 浏览次数：20472 次
一个简单的拖放问题
<!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> 无标题文档 </title>
</head>
<style>
.aaa{ list-style:none; padding:0px; margin:0px;}
.aaa li{ width:50px; height:50px; border:1px solid #000000; line-height:50px; text-align:center; float:left; margin:5px;}
</style>
<body>
<ul class= "aaa ">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
</body>
</html>
这样的 几个方块 如何实现
http://www.google.com/ig?hl=zh-CN 这样的拖动效果？
------解决方案--------------------
<!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 " lang= "gb2312 ">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... ) </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 " />
<meta name= "editor " content= "枫岩,http://www.cnlei.com ">
<meta name= "keywords " content= "代码实例：拖动对象 ">
<meta name= "description " content= "最简短的拖动对象代码实例演示 ">
<style>
.aa {position:relative;cursor:move;}
</style>
<script language= "javascript ">
<!--
// Author: Unkonw
// Modify: 枫岩@CnLei.com
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+ "px ";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+ "px ";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML ";
while (oDragHandle.tagName != topElement && oDragHandle.className != "aa ") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className== "aa ") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function( "isdrag=false ");
</script>
</head>
<body >
<img src= "http://webdesign.chinaitlab.com/UploadFiles_8014/200612/20061202115506895.gif " class= "aa " />
<img src= "http:/
<!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> 无标题文档 </title>
</head>
<style>
.aaa{ list-style:none; padding:0px; margin:0px;}
.aaa li{ width:50px; height:50px; border:1px solid #000000; line-height:50px; text-align:center; float:left; margin:5px;}
</style>
<body>
<ul class= "aaa ">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
</body>
</html>
这样的 几个方块 如何实现
http://www.google.com/ig?hl=zh-CN 这样的拖动效果？
------解决方案--------------------
<!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 " lang= "gb2312 ">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... ) </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 " />
<meta name= "editor " content= "枫岩,http://www.cnlei.com ">
<meta name= "keywords " content= "代码实例：拖动对象 ">
<meta name= "description " content= "最简短的拖动对象代码实例演示 ">
<style>
.aa {position:relative;cursor:move;}
</style>
<script language= "javascript ">
<!--
// Author: Unkonw
// Modify: 枫岩@CnLei.com
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+ "px ";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+ "px ";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML ";
while (oDragHandle.tagName != topElement && oDragHandle.className != "aa ") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className== "aa ") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function( "isdrag=false ");
</script>
</head>
<body >
<img src= "http://webdesign.chinaitlab.com/UploadFiles_8014/200612/20061202115506895.gif " class= "aa " />
<img src= "http:/
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
