拖放卡片

在接下来的一周左右，我们将为我们在 Chatman Design 的一位客户推出一个更新的网站。该客户是 Beacon Athletics，一家销售运动场地设备的公司。首页当然尤为重要。在过去的一年左右的时间里，随着网站不同区域的添加以及每个部分都在争夺关注，他们目前的首页变得相当杂乱。最重要的是，Beacon 是一家销售产品的公司，首页需要非常清楚地说明这一点。其次，它需要传达 Beacon 是运动场地方面的专家。从他们那里购买产品与从沃尔玛购买不同。他们是一个由著名专业人士组成的团队，将帮助您获得所需的一切。此外（显然），页面需要视觉上吸引人、可用且易于访问，并且不要过于“偏离主题”以至于让现有用户感到困惑。

我们的解决方案试图在简化同时解决所有这些问题。该解决方案是“一堆”复古棒球卡片（往年真正的设计），并重新设计了许多不同的流行 Beacon 产品。

我认为卡片的设计和整体布局都非常不错，但是为了增加一些额外的风格，我们使用了 jQuery UI 的“可拖动” 功能。通过此功能，我们使每张卡片成为一个独特的对象，您可以单击并将其拖动到屏幕周围，以便更好地查看卡片，并最终访问与该卡片对应的商店页面。

每个图像都是一个 alpha 透明的 PNG（用于阴影），并且具有“draggable”的类名。卡片使用绝对定位放置。为了实现这一点，我们只需在页面上包含 jQuery 和我们自定义构建的 jQuery UI 下载，并在这些图像上调用新的可拖动函数。

<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-personalized-1.6b.packed.js"></script>
<script type="text/javascript">
   $(function(){
		$(".draggable").draggable({
			zIndex: "7000"
		});
	});
</script>

zIndex 参数在这里只是一个“辅助”，因为它在您拖动卡片时临时应用该 zIndex 值。这非常有用，但我们还没有完全实现。因为这只是暂时的，所以卡片的堆叠顺序将始终相同。我们希望当单击卡片时，较低的卡片会弹出到顶部。为了实现这一点，我们将“click”事件绑定到卡片，该事件将所有卡片重置为 5000 的 z-index 值，然后将当前卡片重置为 6000。这确保了当前正在拖动的卡片始终位于顶部，并在拖动完成后保持在顶部！

$(".draggable").click(function(){
	$(".draggable").css({
		"zIndex": "5000"
	});
	$(this).css({
		"zIndex": "6000"
	});
});

作为最后的润色，我们希望找到一种方法，让您能够访问网站中每张卡片所指的页面。为此，我们还将“双击”事件绑定到每张卡片。为了获取正确的 URL，我们为每个图像添加了一个“rel”标签，其中包含该 URL。然后，当双击事件发生时，窗口位置将设置为该值。

$(".draggable").dblclick(function(){
	window.location=$(this).attr("rel");
	return false;
});

在网络上双击某些内容有点不寻常，也不太直观，因此在卡片下方放置了一个非常简短的一句话说明。

效果很好。我们有一个 临时演示网站，您可以看到它的实际效果。此效果现在 在其网站上上线。您可能会注意到页面上有一些其他 jQuery 操作。蓝色的小标签有一个有趣的下拉效果，显示了一些最新新闻、网站搜索和产品促销。首页还特色一个“车库门”。