[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>

.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>

// 层名称
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>
</HTML>

博客介绍

正文

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

评论