jQuery UI拖拽到Table表格特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI拖拽到Table表格特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI拖拽到Table表格特效</title>
<!--导入jquery插件-->
<script type="text/javascript" src="jQuery1.11.3.min.js"></script>
<!--导入jqueryUI插件-->
<script type="text/javascript" src="jquery-ui.js"></script>

<!--自写脚本-->
<script type="text/javascript" language="javascript">
   //在页面加载完之后加载jquery
   $().ready(function(e) {
       //拖拽复制体
       $('td[id^="draggable"]').draggable({
		   helper:"clone",
		   cursor: "move"
		 });

		//释放后
	   $('td[id^="target"]').droppable({
			drop:function(event,ui){
				$(this).children().remove();
				var source = ui.draggable.clone();
				$('<img/>', {
					src: 'btn_delete.png',
					style:'display:none',
					click: function() {
					  source.remove();
					}
				}).appendTo(source);

			
				source.mouseenter(function () { 
					$(this).find("img").show();
				}); 

				source.mouseleave(function () {
					$(this).find("img").hide();
				}); 

				$(this).append(source);

			}
		});
     });
</script>
<!--自写脚本-->

<style>
	table
	{
		border-collapse:collapse;
	}
	table td
	{
		empty-cells : show
	}
    body {
        background:#82d1ff
    }
</style>

</head>

<body>
<center>
<table>
<tr>
	<td>
		<table border = "2">
		<tr height="40">
			<td id="draggable1" width = "110" bgcolor="peru">取证类文书</td>
		</tr>
		<tr height="40">
			<td id="draggable2" width = "110" bgcolor="lightgreen">检查类文书</td>
		</tr>
		<tr height="40">
			<td id="draggable3" width = "110" bgcolor="salmon">处罚类文书</td>
		</tr>
            <tr height="40">
                <td id="draggable4" width="110" bgcolor="salmon">案件类文书</td>
            </tr>
		</table>
	</td>
	<td>
		<table border = "2" >
		<tr height="40">
			<td width = "150">类别</td>
			<td width = "150">名称</td>
			<td width = "150">来源</td>
			<td width = "150">待办工作</td>
		</tr>
		<tr height="40">
			<td width = "150" id="target11"></td>
			<td width = "150" id="target12"></td>
			<td width = "150" id="target13"></td>
			<td width = "150" id="target14"></td>
		</tr>
		<tr height="40">
			<td width = "150" id="target21"></td>
			<td width = "150" id="target21"></td>
			<td width = "150" id="target21"></td>
			<td width = "150" id="target21"></td>
		</tr>
		<tr height="40">
			<td width = "150" id="target31"></td>
			<td width = "150" id="target31"></td>
			<td width = "150" id="target31"></td>
			<td width = "150" id="target31"></td>
		</tr>
		<tr height="40">
			<td width = "150" id="target41"></td>
			<td width = "150" id="target41"></td>
			<td width = "150" id="target41"></td>
			<td width = "150" id="target41"></td>
		</tr>
		<tr height="40">
			<td width = "150" id="target51"></td>
			<td width = "150" id="target51"></td>
			<td width = "150" id="target51"></td>
			<td width = "150" id="target51"></td>
		</tr>
		<tr height="40">
			<td width = "150" id="target61"></td>
			<td width = "150" id="target61"></td>
			<td width = "150" id="target61"></td>
			<td width = "150" id="target61"></td>
		</tr>
		</table>
	</td>
</tr>
</table>
</center>
</body>

附件:下载该文件资源,减少时间成本(增值服务)