dragTreeTable如何拿到拖拽的两个元素
时间: 2024-05-31 16:13:49 浏览: 4
dragTreeTable是一个比较常用的树形表格组件,用于实现树形结构的拖拽排序。在拖拽过程中,需要拿到拖拽的两个元素,即被拖拽的元素和目标元素。
具体实现方式如下:
1. 首先,在拖拽开始时,记录被拖拽的元素的信息,如节点id、父节点id、当前位置等。
2. 在拖拽过程中,根据鼠标位置计算出目标元素的位置和信息,如节点id、父节点id、插入位置等。
3. 当拖拽结束时,将被拖拽的元素和目标元素的信息传递给后台,进行相应的数据处理。
需要注意的是,在计算目标元素的位置和信息时,需要考虑以下几个因素:
1. 目标元素的位置可能在被拖拽元素的上方、下方或中间。
2. 如果目标元素是一个子节点,则需要将被拖拽元素插入到该节点的子节点列表中。
3. 如果目标元素是一个父节点,则需要将被拖拽元素插入到该节点的后面,也就是作为该节点的兄弟节点。
综上所述,实现dragTreeTable拿到拖拽的两个元素,需要考虑多种情况,具体实现方式需要根据具体的需求和业务逻辑进行相应的调整。
相关问题
selenium拖动的元素有两个,怎么拖动
您可以使用`ActionChains`类来拖动元素。首先,使用`find_elements_by_xxx`方法获取所有的需要拖动的元素,然后使用`drag_and_drop`方法将第一个元素拖动到第二个元素的位置。代码示例:
```
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get("https://www.example.com")
# 获取需要拖动的元素
element1 = driver.find_element_by_xpath("xpath1")
element2 = driver.find_element_by_xpath("xpath2")
# 使用ActionChains类来拖动元素
action = ActionChains(driver)
action.drag_and_drop(element1, element2).perform()
```
注意替换`xpath1`和`xpath2`为实际元素的XPath路径。
前端HTML5写一个拖拽到目标元素的代码
可以使用HTML5的拖放API来实现这个功能,以下是一个简单的示例代码:
HTML部分:
```
<div id="drag" draggable="true">拖拽我</div>
<div id="target">目标元素</div>
```
JavaScript部分:
```
var drag = document.getElementById("drag");
var target = document.getElementById("target");
drag.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text/plain", "拖拽的数据");
});
target.addEventListener("dragover", function(event) {
event.preventDefault();
});
target.addEventListener("drop", function(event) {
var data = event.dataTransfer.getData("text/plain");
target.innerHTML = data + "已经被拖拽到这里了";
});
```
以上代码实现了将一个可拖拽的元素拖拽到目标元素上,并在目标元素中显示拖拽的数据。