版权声明:如有侵权,请联系[email protected]。 https://blog.csdn.net/cs373616511/article/details/80572850
效果图:(拖拽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>