3.2.5: jQuery的DOM操作之复制节点_jquery3.2 克隆元素-优快云博客

本文介绍了一种使用复制节点实现购物网站商品拖动功能的技术，通过jQuery库实现单击与拖动交互，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

某些购物网站，用户不仅可以通过单击商品下方的选择按钮进行购买，还可以通过鼠标拖动商品将其放到购物车中。这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到购物效果。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("ul li").click(function(){
			$(this).clone().appendTo("ul");
		});
	});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?">你最喜欢的水果是?</p>
<ul>
	<li title="apple">苹果</li>
	<li title="orange">橘子</li>
	<li title="banana">香蕉</li>
</ul>
</body>
</html>

以上为单击香蕉后的结果。

复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，可以为clone方法传一个true参数，它的含义是复制元素的同时复制元素所绑定的事件。

<script type="text/javascript">
	$(document).ready(function(){
		$("ul li").click(function(){
			$(this).clone(true).appendTo("ul");
		});
	});
</script>