rpa_browser_dragElement
拖拽网页元素，网页元素需要提前使用“捕获网页元素”功能捕获，并保存
1. 函数
rpa_browser_dragElement(tabId, elementId, xDistance, yDistance, index=0, waitElement=True, parentElement="")
- tabId：字符串类型，网页标识；
- elementId：字符串类型，元素标识，“捕获网页元素”功能捕获；
- xDistance：整数类型，横向拖拽距离，正数向右，负数向左；
- yDistance：整数类型，竖向拖拽距离，正数向下，负数向上；
- index：整数类型，元素序号，若捕获到的元素存在多个时，标识操作的元素序号，索引从0开始；
- waitElement：bool类型，是否等待元素出现。若值为True，函数先等待元素出现，再执行操作；若值为False，函数直接执行操作；
- parentElement: 父元素描述字符串，通过rpa_browser_getElement接口返回，表示元素的查找范围，传空字符串表示从根目录开始查找元素。
2. 返回值
若执行成功返回True，执行失败返回False，通过rpa_getLastErrorCode()获取错误码，rpa_getLastErrorMsg()获取错误信息。
3. 示例
# 打开网页
tabId = rpa_browser_openUrl('D:/drag.html')
# 拖拽滑块
rpa_browser_dragElement(tabId, '滑块', 100, 0)
rpa_browser_dragElement(tabId, '滑块', 200, 0)
rpa_browser_dragElement(tabId, '滑块', 280, 0)
其中“drag.html”代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>滑块解锁封装js方法</title>
<link rel="stylesheet" href="font/iconfont.css">
<style>
*{
padding: 0;
margin: 0;
}
#box{
position: relative;
width: 300px;
height: 40px;
margin: 0 auto;
margin-top: 1000px;
background-color: #e8e8e8;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}
.bgColor{
position: absolute;
left:0;
top:0;
width:40px;
height: 40px;
background-color: lightblue;
}
.txt{
position: absolute;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #000;
text-align: center;
}
.slider{
position: absolute;
left:0;
top:0;
width: 50px;
height: 38px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
cursor: move;
}
.slider>i{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.slider.active>i{
color:green;
}
</style>
</head>
<body>
<div id="box" onselectstart="return false;">
<div class="bgColor"></div>
<div class="txt" >滑动解锁</div>
<div class="slider"><i class="iconfont icon-double-right"></i></div>
</div>
<script>
function getEle(selector){
return document.querySelector(selector);
}
var box = getEle("#box"),
bgColor = getEle(".bgColor"),
txt = getEle(".txt"),
slider = getEle(".slider"),
icon = getEle(".slider>i"),
successMoveDistance = box.offsetWidth- slider.offsetWidth,
downX,
isSuccess = false;
slider.onmousedown = mousedownHandler;
function mousedownHandler(e){
bgColor.style.transition = "";
slider.style.transition = "";
var e = e || window.event || e.which;
downX = e.clientX;
document.onmousemove = mousemoveHandler;
document.onmouseup = mouseupHandler;
};
function getOffsetX(offset,min,max){
if(offset < min){
offset = min;
}else if(offset > max){
offset = max;
}
return offset;
}
function mousemoveHandler(e){
var e = e || window.event || e.which;
var moveX = e.clientX;
var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
bgColor.style.width = offsetX + "px";
slider.style.left = offsetX + "px";
if(offsetX == successMoveDistance){
success();
}
e.preventDefault();
};
function mouseupHandler(e){
if(!isSuccess){
bgColor.style.width = 0 + "px";
slider.style.left = 0 + "px";
bgColor.style.transition = "width 0.8s linear";
slider.style.transition = "left 0.8s linear";
}
document.onmousemove = null;
document.onmouseup = null;
};
function success(){
isSuccess = true;
txt.innerHTML = "解锁成功";
bgColor.style.backgroundColor ="lightgreen";
slider.className = "slider active";
icon.className = "iconfont icon-xuanzhong";
slider.onmousedown = null;
document.onmousemove = null;
};
</script>
</body>
</html>