selenium解决HTML5不能drag and drop
https://gist.github.com/florentbr/60ef7cb8d9b1ae690cafc82aad52da73
from selenium import webdriver
import time
# JavaScript: HTML5 Drag and drop script
# param1 (WebElement): Source element to drag
# param2 (WebElement): Optional - target element for the drop
# param3 (int): Optional - Drop offset x relative to the target if any or source element
# param4 (int): Optional - Drop offset y relative to the target if any or source element
# param4 (int): Optional - Delay in milliseconds (default = 1ms) for dragging and dropping
# param5 (string): Optional - Key pressed (alt or ctrl or shilf)
JS_DRAG_AND_DROP = "var t=arguments,e=t[0],n=t[1],i=t[2]||0,o=t[3]||0,r=t[4]||1,a=t[5]||'',s='alt'===a||'\ue00a'===a,l='ctrl'===a||'\ue009'===a,c='shift'===a||'\ue008'===a,u=e.ownerDocument,f=e.getBoundingClientRect(),g=n?n.getBoundingClientRect():f,p=f.left+f.width/2,d=f.top+f.height/2,h=g.left+(i||g.width/2),m=g.top+(o||g.height/2),v=u.elementFromPoint(p,d),y=u.elementFromPoint(h,m);if(!v||!y){var E=new Error('source or target element is not interactable');throw E.code=15,E}var _={constructor:DataTransfer,effectAllowed:null,dropEffect:null,types:[],files:Object.setPrototypeOf([],null),_items:Object.setPrototypeOf([],{add:function(t,e){this[this.length]={_data:''+t,kind:'string',type:e,getAsFile:function(){},getAsString:function(t){t(this._data)}},_.types.push(e)},remove:function(t){Array.prototype.splice.call(this,65535&t,1),_.types.splice(65535&t,1)},clear:function(t,e){this.length=0,_.types.length=0}}),setData:function(t,e){this.clearData(t),this._items.add(e,t)},getData:function(t){for(var e=this._items.length;e--&&this._items[e].type!==t;);return e>=0?this._items[e]._data:null},clearData:function(t){for(var e=this._items.length;e--&&this._items[e].type!==t;);this._items.remove(e)},setDragImage:function(t){}};function w(t,e,n,i){for(var o=0;o目前找到的有jquery的、无需jquery的，其中基本都是不支持xpath，只有这一个既不需要jquery也不需要css selector，并且封装了延迟、附加键的方法
原始JS如下：可以看到语法还是比较老的。
var args = arguments,
elemSrc = args[0],
elemDst = args[1],
offsetX = args[2] || 0,
offsetY = args[3] || 0,
delay = args[4] || 1,
key = args[5] || '',
alt = key === 'alt' || key === '\uE00A',
ctrl = key === 'ctrl' || key === '\uE009',
shift = key === 'shift' || key === '\uE008',
doc = elemSrc.ownerDocument,
box1 = elemSrc.getBoundingClientRect(),
box2 = elemDst ? elemDst.getBoundingClientRect() : box1,
x = box1.left + (box1.width / 2),
y = box1.top + (box1.height / 2),
x2 = box2.left + (offsetX ? offsetX : box2.width / 2),
y2 = box2.top + (offsetY ? offsetY : box2.height / 2),
source = doc.elementFromPoint(x, y),
target = doc.elementFromPoint(x2, y2);
if (!source || !target) {
var ex = new Error('source or target element is not interactable');
ex.code = 15;
throw ex;
}
var dataTransfer = {
constructor : DataTransfer,
effectAllowed : null,
dropEffect : null,
types : [ ],
files : Object.setPrototypeOf([], null),
_items : Object.setPrototypeOf([], {
add : function add(data, type) {
this[this.length] = {
_data : '' + data,
kind : 'string',
type : type,
getAsFile : function () { },
getAsString : function (callback) { callback(this._data) }
};
dataTransfer.types.push(type);
},
remove : function remove(i) {
Array.prototype.splice.call(this, i & 65535, 1);
dataTransfer.types.splice(i & 65535, 1);
},
clear : function clear(data, type) {
this.length = 0;
dataTransfer.types.length = 0;
}
}),
setData : function setData(format, data) {
this.clearData(format);
this._items.add(data, format);
},
getData : function getData(format) {
for (var i = this._items.length; i-- && this._items[i].type !== format;);
return i >= 0 ? this._items[i]._data : null;
},
clearData : function clearData(format) {
for (var i = this._items.length; i-- && this._items[i].type !== format;);
this._items.remove(i);
},
setDragImage : function setDragImage(format) { }
};
if ('items' in DataTransfer.prototype)
dataTransfer.items = dataTransfer._items;
emit_mouse(source, [ 'pointerdown', 'mousedown' ], 1, function () {
var elem = source;
while (elem && !elem.draggable)
elem = elem.parentElement;
if (!elem || !elem.contains(source))
return;
var box2 = target.getBoundingClientRect();
emit_drag(source, 'dragstart', delay, function () {
var box3 = target.getBoundingClientRect();
x = box3.left + x2 - box2.left;
y = box3.top + y2 - box2.top;
emit_drag(target, 'dragenter', 1, function () {
emit_drag(target, 'dragover', delay, function () {
emit_drag(doc.elementFromPoint(x, y), 'drop', 1, function () {
emit_drag(source, 'dragend', 1, function () {
emit_mouse(doc.elementFromPoint(x, y), [ 'mouseup', 'pointerup' ]);
})})})})})});
function emit_mouse(element, types, delay, callback) {
for (var i=0; i < types.length; ++i) {
var event = doc.createEvent('MouseEvent');
event.initMouseEvent(types[i], true, true, doc.defaultView, 0, 0, 0, x, y, ctrl, alt, shift, false, 0, null);
element.dispatchEvent(event);
}
callback && setTimeout(callback, delay);
}
function emit_drag(element, type, delay, callback) {
var event = doc.createEvent('DragEvent');
event.initMouseEvent(type, true, true, doc.defaultView, 0, 0, 0, x, y, ctrl, alt, shift, false, 0, null);
Object.setPrototypeOf(event, null);
event.dataTransfer = dataTransfer;
Object.setPrototypeOf(event, DragEvent.prototype);
element.dispatchEvent(event);
callback && setTimeout(callback, delay);
}不过我目前使用pyautogui，虽然看上去有点傻...