EasyUI拖放示例

最新推荐文章于 2024-10-18 14:36:38 发布

雨过天晴~

最新推荐文章于 2024-10-18 14:36:38 发布

阅读量1k

点赞数

分类专栏： EasyUI

本文链接：https://blog.youkuaiyun.com/u012714280/article/details/80780199

版权

EasyUI 专栏收录该内容

3 篇文章

订阅专栏

本文通过HTML和JS代码示例，展示了如何在EasyUI中实现拖放功能。配合提供的参考文档，读者可以理解并应用到自己的项目中。

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

HTML如下：

<!DOCTYPE HTML>
<html>
  <head>
    <title>EasyUI拖放</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<link rel="stylesheet" type="text/css" href="common/easyui/themes/icon.css">
	<link id="themeLink" rel="stylesheet" type="text/css" href="common/easyui/themes/bootstrap/easyui.css">
	<script type="text/javascript" src="common/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="common/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="common/easyui/locale/easyui-lang-zh_CN.js"></script>
	<style type="text/css">
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}
	</style>
</head>
<body>
<div style="float:left;width:100px;">
	<table style="background:#E0ECFF;">
		<tr>
			<td  class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;">
				<div class="item">关键词1</div>
			</td>
		</tr>
		<tr>
			<td  class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;">
				<div class="item">关键词1</div>
			</td>
		</tr>
		<tr>
			<td  class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;">
				<div class="item">关键词1</div>
			</td>
		</tr>
		<tr>
			<td  class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;">
				<div class="item">关键词1</div>
			</td>
		</tr>
	</table>
</div>
<div style="float:left;width:100px;height:1px;"></div><!--间隔-->
<div style="float:left;width:800px;">
	<table style="background:#E0ECFF;">
		<tr>
			<td style="width:100px;text-align:center;">标题</td>
			<td class="drop" style="width:100px;text-align:center;"></td>
			<td class="drop" style="width:100px;text-align:center;"></td>
			<td class="drop" style="width:100px;text-align:center;"></td>
			<td class="drop" style="width:100px;text-align:center;"></td>
			<td class="drop" style="width:100px;text-align:center;"></td>
			<td class="drop" style="width:100px;text-align:center;"></td>
			<td class="drop" style="width:100px;text-align:center;"></td>
		</tr>
	</table>
</div>
</body>
</html>

JS如下：

	<script>
		$(function(){
			var background = '#fafafa';//背景色
			var overBackground = '#FBEC88';//经过背景色
			$('.drop').css('background',background);
			$('.draggable').draggable({
				revert:true,//停止返回原位置
				proxy:'clone'//克隆形式进行拖拽
			});
			$('.drop').droppable({
				onDragOver:function(e,source){
					$(this).css('background',overBackground);//经过变色
				},
				onDragLeave:function(e,source){
					$(this).css('background',background);//离开还原
				},
				onDrop:function(e,source){
					var t = $(this);
					t.css('background',background);//停止还原
					//复制元素
					var c = $(source).clone();
					t.empty().append(c);
					//可拖拽
					c.draggable({
						revert:true,//停止返回原位置
						onStopDrag:function(e){
							t.empty();//拖离删除
						}
					});
				}
			});
		});
	</script>

效果如下：