[JavaScript]网页内容动态拖动 -- 梦源于风飞工作室-- 编程爱好者博客

实现动态拖动商品到购物车并添加该商品。用HTML+JavaScript编写。主要实现步骤2步：第一步：初始化event事件，即onmousedown, onmousemove, ommouseup 浏览器的3个事件，用户一按下，移动，释放鼠标则触发对应的事件第二步：实现事件处理函数。演示地址：http://scboy.ik8.com/dragImage.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Stitch Store </TITLE> <style type="text/css"> .header{ position:absolute; top:28; left:25; } .store { position:absolute; top:43; left:275; } .home { position:absolute; top:12; left:660; } .line { position:absolute; top:111; left:17; } .shirtsHd { position:absolute; top:161; left:21; } .shirtGreen { position:absolute; top:161; left:136; z-index:1; } .shirtOrange{ position:absolute; top:161; left:232; z-index:1; } .shirtPurple{ position:absolute; top:161; left:328; z-index:1; } .sweatshirtsHd { position:absolute; top:277; left:21; } .sweatOrange { position:absolute; top:277; left:136; z-index:1; } .sweatPurple { position:absolute; top:277; left:280; z-index:1; } .swellstuffsHd { position:absolute; top:387; left:21; } .swellCap { position:absolute; top:387; left:136; z-index:1; } .swellMug { position:absolute; top:387; left:251; z-index:1; } .swellMartini { position:absolute; top:387; left:328; z-index:1; } .dragTip{ position:absolute; top:490; left:63; } .cart { position:absolute; top:142; left:462; z-index:3; } </style> <script language="javascript"> var offsetX = 0; // 点击的层的X坐标 var offsetY = 0; // 点击的层的Y坐标 // 层名称 var layerNameArray = new Array( "shirtGreen", "shirtOrange", "shirtPurple", "sweatOrange", "sweatPurple", "swellCap", "swellMug", "swellMartini" ); // 选中的层 var selectedProduct; // 初始化事件 function init() { // onmousedown, onmousemove, ommouseup 浏览器的3个事件，用户一按下，移动， // 释放鼠标则触发对应的事件 // 当用户点击鼠标时，则调用grabProduct函数，其他2个累似 document.onmousedown = grabProduct; document.onmousemove = dragProduct; document.onmouseup = releaseProduct; } //================================================================ /* onMouseDwon事件处理函数 */ // 初始化用户点击 function grabProduct( e ) { setSelectElem( e ); // 设置选中的层的对象 if ( selectedProduct ) // 判断是否点击在否为商品层上 { // 获得点击的X,Y坐标（相对于当前层的坐标，不是相对于窗口的坐标） offsetX = window.event.offsetX; offsetY = window.event.offsetY; //alert( offsetX ); // 调式 //alert( offsetY ); } } // 设置层大小 function setzIndex( product, zorder ) { product.style.zIndex = zorder; } // 获得选中的层的对象 function setSelectElem( e ) { var imgObj = window.event.srcElement; // 获得点击的对象 // alert( imgObj.tagName ); var testObj = imgObj.parentElement; // 获得图片所属的层对象 // alert( testObj.tagName ); var layerName = testObj.id; // 获得点击的层名 for ( var i = 0; i < layerNameArray.length; i++ ) { if ( layerName == layerNameArray[i] && imgObj ) { selectedProduct = testObj; // 获得层对象 setzIndex( selectedProduct, 100 ); return; } } } //================================================================ /* onMouseMove事件处理函数 */ // 计算层要移动到的目的地的位置 function dragProduct( e ) { if ( selectedProduct ) { // 获得当前鼠标的位置 var x = window.event.clientX - offsetX; var y = window.event.clientY - offsetY; moveTo( selectedProduct, x, y ); } // 使用return false，为了避免一些系统的混乱，防止将层拖动到预定指定的位置之外 return false; } // 实际实现层的移动 function moveTo( product, x, y ) { // 移动层到指定位置 product.style.left = x; product.style.top = y; } //================================================================ /* onMouseUp事件处理函数 */ // 释放鼠标并将选中的商品添加到购物车 function releaseProduct( e ) { // 判断是否选中商品 if ( selectedProduct ) { // 获得当前鼠标x,y坐标 var releaseX = window.event.clientX; var releaseY = window.event.clientY; // 获得购物车的Left, Top, Width, Height var cartLeft = document.getElementById("cart").offsetLeft; var cartTop = document.getElementById("cart").offsetTop; var cartWidth = document.getElementById("cart").offsetWidth; var cartHeight = document.getElementById("cart").offsetHeight; // 判断当前坐标是否在购物车中 if ( (releaseX > cartLeft) && (releaseX < cartLeft + cartWidth) && (releaseY > cartTop) && (releaseY < cartTop + cartHeight) ) { // 添加到购物车 alert( "insert into cart" ); } // 设置zIndex=0和清空商品对象 setzIndex( selectedProduct, 1 ); selectedProduct = null; } } </script> </HEAD> <BODY onload="init();"> <div class="header"> <img src="images/stitch.gif"></img> </div> <div class="store"> <img src="images/store.gif"></img> </div> <div class="home"> <img src="images/home.gif"></img> </div> <div class="line"> <img src="images/black_line.gif"></img> </div> <div class="shirtsHd"> <img src="images/shirts.gif"></img> </div> <div class="shirtGreen" id="shirtGreen"> <img src="images/shirt_green.gif"></img> </div> <div class="shirtOrange" id="shirtOrange"> <img src="images/shirt_orange.gif"></img> </div> <div class="shirtPurple" id="shirtPurple"> <img src="images/shirt_purple.gif"></img> </div> <div class="sweatshirtsHd"> <img src="images/sweatshirts.gif"></img> </div> <div class="sweatOrange" id="sweatOrange"> <img src="images/sweat_orange.gif"></img> </div> <div class="sweatPurple" id="sweatPurple"> <img src="images/sweat_purple.gif"></img> </div> <div class="swellstuffsHd"> <img src="images/swellstuff.gif"></img> </div> <div class="swellCap" id="swellCap"> <img src="images/cap.gif"></img> </div> <div class="swellMug" id="swellMug"> <img src="images/mug.gif"></img> </div> <div class="swellMartini" id="swellMartini"> <img src="images/martini.gif"></img> </div> <div class="dragTip"> <img src="images/drag.gif"></img> </div> <div class="cart" id="cart"> <img src="images/cart.gif"></img> </div> </BODY></HTML>

博客介绍

正文

[JavaScript]网页内容动态拖动2006-12-26 23:55:00

评论