上一篇
jquery拖拽流程布局
在jQuery UI中，我们可以使用拖拽功能来实现元素的移动，当我们完成拖拽操作后，我们可能需要获取被拖拽元素的位置信息，或者对被拖拽元素进行一些其他的操作，如何在jQuery UI拖拽后取值呢？本文将详细介绍如何实现这一功能。
我们需要引入jQuery和jQuery UI的相关文件，在HTML文件中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>jQuery UI 拖拽示例</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jqueryui.min.js"></script>
</head>
<body>
<!在这里编写HTML代码 >
</body>
</html>
接下来，我们在HTML文件中添加一个可拖拽的元素，我们可以添加一个<div>元素，并为其添加一个类名draggable：
<div id="draggable" class="draggable">点击我进行拖拽</div>
我们需要初始化这个可拖拽的元素，在<script>标签中添加以下代码：
$(function() {
$("#draggable").draggable({
stop: function(event, ui) {
// 在这里编写拖拽结束后的回调函数
}
});
});
在上面的代码中，我们为#draggable元素绑定了一个draggable方法，该方法接收一个配置对象作为参数，在这个配置对象中，我们定义了一个stop回调函数，该函数将在拖拽操作结束后被调用。
现在，我们可以在stop回调函数中编写我们需要执行的操作，我们可以获取被拖拽元素的位置信息：
$(function() {
$("#draggable").draggable({
stop: function(event, ui) {
var x = ui.position.left; // 获取元素左上角的横坐标
var y = ui.position.top; // 获取元素左上角的纵坐标
console.log("元素被拖拽到的位置：", x, y); // 输出元素的位置信息
}
});
});
在上面的代码中，我们通过ui.position对象获取了被拖拽元素的位置信息。ui.position对象包含了两个属性：left和top，分别表示元素左上角的横坐标和纵坐标，我们可以将这些位置信息输出到控制台，以便进行调试。
除了获取位置信息外，我们还可以在stop回调函数中对被拖拽元素进行其他操作，我们可以将被拖拽元素移动到指定的位置：
$(function() {
$("#draggable").draggable({
stop: function(event, ui) {
var x = ui.position.left; // 获取元素左上角的横坐标
var y = ui.position.top; // 获取元素左上角的纵坐标
$("#draggable").css({ // 修改元素的样式，将其移动到指定位置
left: x + "px",
top: y + "px"
});
}
});
});
在上面的代码中，我们通过修改元素的left和top样式属性，将被拖拽元素移动到了指定的位置，这样，我们就可以实现在jQuery UI拖拽后取值的功能了。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/288692.html
