jsplumb整体拖动后重绘所有元素时 又再次回到了原来的位置
时间: 2024-06-01 16:09:04 浏览: 75
这个问题可能是因为你没有正确保存每个元素的位置信息。在整体拖动完成后,你需要更新每个元素的位置信息,然后重新绘制它们,而不是简单地将它们移回原来的位置。
具体来说,你需要在整体拖动完成时,遍历所有的元素,更新它们的位置信息,并将这些位置信息保存到数据库或其他地方。在重绘所有元素时,你需要从数据库或其他地方读取每个元素的位置信息,并将它们绘制到正确的位置。
如果你已经正确保存了位置信息,但问题仍然存在,可能是因为你的重绘代码有问题。在这种情况下,你需要检查你的代码,确保它正确地使用了保存的位置信息,并将元素绘制到正确的位置。
相关问题
jsplumb节点可拖动_jquery – jsPlumb拖动元素位置
首先,需要在页面中引入jsPlumb库和jQuery库。
然后,按照以下步骤设置节点可拖动:
1. 给节点元素添加类名,例如"draggable"。
2. 使用jsPlumb.draggable()方法将这些带有类名"draggable"的元素设置为可拖动:
```js
jsPlumb.draggable($(".draggable"), {
containment: "parent" //限制节点只能在父级容器内拖动
});
```
其中,containment属性用于限制节点只能在指定的容器内拖动。
完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>jsPlumb拖动元素位置</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsPlumb/2.17.7/js/jsplumb.min.js"></script>
<style type="text/css">
#container {
width: 600px;
height: 400px;
border: 1px solid #ccc;
position: relative;
}
.node {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
position: absolute;
text-align: center;
line-height: 100px;
cursor: move;
}
</style>
</head>
<body>
<div id="container">
<div class="node draggable" style="top: 100px; left: 100px;">节点1</div>
<div class="node draggable" style="top: 200px; left: 200px;">节点2</div>
</div>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.draggable($(".draggable"), {
containment: "parent"
});
});
</script>
</body>
</html>
```
element dialog拖动后,点击关闭使它回到原来的位置
Element Dialog是一个轻量级的Vue.js组件,用于创建弹出式对话框。当你通过拖动改变其位置后,通常希望能够在用户点击关闭按钮时将其恢复到初始或预期的位置。这通常涉及到两个步骤:
1. **事件监听**: 在Dialog组件上监听`close`或`before-close`事件,当用户点击关闭按钮时触发。
```html
<element-dialog @close="dialogClose" />
```
2. **处理函数**: 创建一个名为`dialogClose`的方法,在这个方法里,你可以获取当前Dialog的位置信息(例如,计算相对于屏幕的偏移),然后将其设置回默认的位置。如果保存了原始位置的数据,可以直接应用。
```javascript
data() {
return {
originalPosition: null,
};
},
methods: {
dialogClose() {
if (this.mousePosition !== null) {
// 将originalPosition设回鼠标当前位置或者存储的位置数据
this.$refs.dialog.style.transform = 'translate(' + this.mousePosition.x + 'px, ' + this.mousePosition.y + 'px)';
}
},
}
```
请注意,具体的实现可能会依赖于Element UI提供的API或者其他库对Dialog元素的定位信息。如果你没有保存原始位置,可能需要根据组件的布局规则来动态计算返回到哪里合适。