JqueryUI_draggable 和droppable获取源DOM元素和当前DOM元素

最新推荐文章于 2024-08-09 07:26:20 发布

阿瑟与非

最新推荐文章于 2024-08-09 07:26:20 发布

阅读量4.6k

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/cs373616511/article/details/80572850

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：（拖拽a到b打印结果如图，源码在后面）

基础知识：

所有的事件回调函数都有两个参数：event和ui

event: 浏览器原生的事件； ui: 一个JQuery的ui对象。
其中ui 有以下属性：
a) ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
b) ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}—-也就是可以用ui.position.top获取到该元素与父元素的top当前偏移

c) ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的)

源代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jqueryui_demo</title>
		<script type="text/javascript" src="js/jquery-1.10.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	</head>

	<body>
		<div id="draggable" data-name="one" style="width: 100px;height: 100px;background-color: greenyellow;">a</div>
		<div id="droppable" data-name="two" style="width: 100px;height: 100px;background-color: blueviolet;">b</div>
		<script type="text/javascript">
			$(function() {
				// 初始化#draggable 可以被拖动
				$("#draggable").draggable({
					revert: true
					//使用helper和不使用都可以获取DOM
					//,
					//helper: "clone"
				});
				// 初始化，有东西拖到#droppable时，调用回调函数
				$("#droppable").droppable({
					drop: function(event, ui) {
						var sourceElement = $(ui.helper.context);
						//这种方式会报错，应该转换成jquery对象
						//var sourceElement = ui.helper.context;
						var targetElement = $(this);
						console.log("log---" + sourceElement.attr("id") + "---" + targetElement.attr("id"));
						console.log(sourceElement.data("name") + "---" + targetElement.data("name"))
						alert("drop");
					}
				});
			});
		</script>
	</body>

</html>