教程集 > jQuery > jquery 教程 > 正文一个不错的拖拽--Clone效果代码

一个不错的拖拽--Clone效果代码

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供一个不错的拖拽--Clone效果代码等资源，欢迎您收藏本站，我们将为您提供最新的一个不错的拖拽--Clone效果代码资源

本文章来给大家推荐一个不错的拖拽--Clone效果代码，有需要的朋友可参考。

提示：您可以先修改部分代码再运行

<!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>拖拽--Clone</title>  <style type="text/css">  body,div{margin:0;padding:0;}  body{background:#3e3e3e;}  div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;}  #drag1{top:100px;left:100px;}  #drag2{top:100px;left:300px;}  #temp{opacity:0.3;filter:alpha(opacity=30);}  </style>  <script type="text/javascript">  var zIndex = 1;  window.onload = function ()  {  	var oDrag1 = document.getElementById("drag1");  	var oDrag2 = document.getElementById("drag2");  	drag(oDrag1);  	drag(oDrag2);  };  function drag(oDrag)  {  	var disX = dixY = 0;  	oDrag.onmousedown = function (event)  	{  		var event = event || window.event;  		disX = event.clientX - this.offsetLeft;  		disY = event.clientY - this.offsetTop;		  		  		var oTemp = document.createElement("div");  		oTemp["id"] = "temp";  		oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];  		oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];  		oTemp.style.zIndex = zIndex  ;  		document.body.appendChild(oTemp);  		  		document.onmousemove = function (event)  		{  			var event = event || window.event;  			var iL = event.clientX - disX;  			var iT = event.clientY - disY;  			var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;  			var maxT = document.documentElement.clientHeight - oDrag.offsetHeight  			  			iL <= 0 && (iL = 0);  			iT <= 0 && (iT = 0);  			iL >= maxL && (iL = maxL);  			iT >= maxT && (iT = maxT);  			  			oTemp.style.left = iL   "px";  			oTemp.style.top = iT   "px";  			return false;  		};  		  		document.onmouseup = function ()  		{  			document.onmousemove = null;  			document.onmouseup = null;  			oDrag.style.left = oTemp.style.left;  			oDrag.style.top = oTemp.style.top;  			oDrag.style.zIndex = oTemp.style.zIndex;  			document.body.removeChild(oTemp);  			oDrag.releaseCapture && oDrag.releaseCapture()  		};  		  		this.setCapture && this.setCapture();		  		return false  	}	  }  </script>  </head>  <body>  <div id="drag1"></div>  <div id="drag2"></div>  </body>  </html>  </td>  	  </tr>  	</table>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
一个不错的拖拽--Clone效果代码
 jquery实现简单的拖拽效果实例兼容所有主流浏览器
 如何使用jQuery Draggable和Droppable实现拖拽功能
 HTML5 DragEvent接口的实例讲解
 html5draggable属性是如何做到页面拖动效果的？方法总结在这里！
jQuery 版元素拖拽原型代码
 简单的jquery拖拽排序效果实现代码
 基于jquery实现的鼠标拖拽元素复制并写入效果
 jquery网页元素拖拽插件效果及实现
 JQuery UI的拖拽功能实现方法小结

上一篇：jQuery教程详解（一）下一篇：js 跑马灯状态栏效果代码

[关闭]

一个不错的拖拽--Clone效果代码

最近更新

浏览排行