拖动 JavaScript - 外部脚本
Dragging JavaScript - external script
我面临的问题很简单,但很难解决。
我正在尝试创建一个脚本,该脚本将使用一个引擎来决定我需要移动哪一块(车、主教、国王、王后)来为我下棋。
如何移动工具?移动工具是通过拖动来完成的,这是我现在的主要问题我无法将一块拖到它的位置。
我在我的代码中尝试了以下序列:
mouseOver(sq1elem);
mouseDown(sq1elem);
mouseOver(sq2elem);
mouseUp(sq2elem);
这些函数正在使用另一个名为 triggerMouseEvent 的函数,该函数取自以下问题:Simulating a mousedown, click, mouseup sequence in Tampermonkey?
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
};
在我的代码中 sq1elem 是一个指向源方块的 HTML 元素(我想从哪里移动棋子)
sq2elem是目标方格
鼠标功能:
function mouseDown(node){
triggerMouseEvent (node, "mousedown");
};
function mouseOver(node){
triggerMouseEvent (node, "mouseover");
};
function mouseUp(node){
triggerMouseEvent (node, "mouseup");
};
我正在测试的网站名为:http://multiplayerchess.com/
当右键单击并查看 Elements 选项卡中的 Event Listeners 时,我只能看到以下事件:
- 点击
- 上下文菜单
- 错误
- 加载
- 鼠标按下
- 鼠标弹起
- 触摸启动
通过查看 Sources 选项卡,我还可以看到有 touchend、touchmove 和 mousemove 事件
他们每个人都调用一个函数:
touchend 和 mouseup 调用 drop 即:
function drop(eventArgs){
preventEvent(eventArgs);
callback && callback(eventArgs);
select();
}
当 touchmove 和 mousemove 调用移动时:
function move(eventArgs){
if(!selection || !callback){
return;
}
callback(eventArgs);
select();
}
我的问题是,由于我没有任何其他事件要处理,我将如何能够仅使用这些事件模拟拖动,以及我将如何能够 "give" 拖动仅从元素放在哪里或从哪里开始?
我的最终目标是一个函数,它有 2 个参数和 2 个元素。
在该函数中应该是开始从 element1(第一个参数)拖动到 element2(第二个参数)
的代码
感谢您的宝贵时间。
编辑:
我已经成功地使用以下函数调用了 move 和 drop 函数:
function mouseDragStart(node){
console.log("Starting drag...");
triggerMouseEvent(node, "touchstart")//change to mouseDown if doesn't work
}
function mouseDragEnd(node){
console.log("Ending drag...");
triggerMouseEvent(node, "touchmove");
triggerMouseEvent(node, "touchend");
}
虽然什么也没发生,传递给函数的 eventArgs 是 MouseEvent,但 clientX、clientY 和其他一些字段仍然为空,这可能是它不起作用的原因吗?
以下是我在代码中使用它的方式:
mouseDragStart(sq1elem);
mouseDragEnd(sq2elem);
同样,sq1elem 和 sq2elem 是元素,其中 sq1elem 是我要拖动的元素,而 sq2elem 是我要将其拖动到的位置。
问题似乎是元素被拖到屏幕的左上角而不是正确的位置,通过在移动函数之后直接出现的拖放函数中设置断点,我现在可以看到元素不在正确的位置,这就是它不起作用的原因。
我是否可以获取元素坐标并将它们发送到 dispatchEvent,以便拖动在正确的位置完成?
感谢您的宝贵时间。
已解决:
通过使用指定的事件,我能够使用一些函数来模拟拖动:
function simulate(element, eventName)
{
var options = extend(defaultOptions, arguments[2] || {});
var oEvent, eventType = null;
for (var name in eventMatchers)
{
if (eventMatchers[name].test(eventName)) { eventType = name; break; }
}
if (!eventType)
throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
if (document.createEvent)
{
oEvent = document.createEvent(eventType);
if (eventType == 'HTMLEvents')
{
oEvent.initEvent(eventName, options.bubbles, options.cancelable);
}
else
{
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
}
element.dispatchEvent(oEvent);
}
else
{
options.clientX = options.pointerX;
options.clientY = options.pointerY;
var evt = document.createEventObject();
oEvent = extend(evt, options);
element.fireEvent('on' + eventName, oEvent);
}
return element;
}
function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
var eventMatchers = {
'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
pointerX: 0,
pointerY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
bubbles: true,
cancelable: true
}
这个函数取自另一个我现在找不到的问题。(抱歉。)
我是这样使用它的:
function mouseDragStart(node){
console.log("Starting drag...");
//console.log(node.offsetTop);
//console.log(node.offsetLeft);
triggerMouseEvent(node,"mousedown")
}
function mouseDragEnd(node){
console.log("Ending drag...");
//console.log(node.offsetTop);
//console.log(node.offsetLeft);
simulate(node, "mousemove" , {pointerX: node.offsetLeft + 5 , pointerY: node.offsetTop + 5})
simulate(node, "mouseup" , {pointerX: node.offsetLeft + 5 , pointerY: node.offsetTop + 5})
}
我能够使用仅适用于元素的那些事件来模拟鼠标拖动。
我面临的问题很简单,但很难解决。 我正在尝试创建一个脚本,该脚本将使用一个引擎来决定我需要移动哪一块(车、主教、国王、王后)来为我下棋。
如何移动工具?移动工具是通过拖动来完成的,这是我现在的主要问题我无法将一块拖到它的位置。
我在我的代码中尝试了以下序列:
mouseOver(sq1elem);
mouseDown(sq1elem);
mouseOver(sq2elem);
mouseUp(sq2elem);
这些函数正在使用另一个名为 triggerMouseEvent 的函数,该函数取自以下问题:Simulating a mousedown, click, mouseup sequence in Tampermonkey?
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
};
在我的代码中 sq1elem 是一个指向源方块的 HTML 元素(我想从哪里移动棋子) sq2elem是目标方格
鼠标功能:
function mouseDown(node){
triggerMouseEvent (node, "mousedown");
};
function mouseOver(node){
triggerMouseEvent (node, "mouseover");
};
function mouseUp(node){
triggerMouseEvent (node, "mouseup");
};
我正在测试的网站名为:http://multiplayerchess.com/ 当右键单击并查看 Elements 选项卡中的 Event Listeners 时,我只能看到以下事件:
- 点击
- 上下文菜单
- 错误
- 加载
- 鼠标按下
- 鼠标弹起
- 触摸启动
通过查看 Sources 选项卡,我还可以看到有 touchend、touchmove 和 mousemove 事件
他们每个人都调用一个函数: touchend 和 mouseup 调用 drop 即:
function drop(eventArgs){
preventEvent(eventArgs);
callback && callback(eventArgs);
select();
}
当 touchmove 和 mousemove 调用移动时:
function move(eventArgs){
if(!selection || !callback){
return;
}
callback(eventArgs);
select();
}
我的问题是,由于我没有任何其他事件要处理,我将如何能够仅使用这些事件模拟拖动,以及我将如何能够 "give" 拖动仅从元素放在哪里或从哪里开始?
我的最终目标是一个函数,它有 2 个参数和 2 个元素。 在该函数中应该是开始从 element1(第一个参数)拖动到 element2(第二个参数)
的代码感谢您的宝贵时间。
编辑:
我已经成功地使用以下函数调用了 move 和 drop 函数:
function mouseDragStart(node){
console.log("Starting drag...");
triggerMouseEvent(node, "touchstart")//change to mouseDown if doesn't work
}
function mouseDragEnd(node){
console.log("Ending drag...");
triggerMouseEvent(node, "touchmove");
triggerMouseEvent(node, "touchend");
}
虽然什么也没发生,传递给函数的 eventArgs 是 MouseEvent,但 clientX、clientY 和其他一些字段仍然为空,这可能是它不起作用的原因吗?
以下是我在代码中使用它的方式:
mouseDragStart(sq1elem);
mouseDragEnd(sq2elem);
同样,sq1elem 和 sq2elem 是元素,其中 sq1elem 是我要拖动的元素,而 sq2elem 是我要将其拖动到的位置。
问题似乎是元素被拖到屏幕的左上角而不是正确的位置,通过在移动函数之后直接出现的拖放函数中设置断点,我现在可以看到元素不在正确的位置,这就是它不起作用的原因。
我是否可以获取元素坐标并将它们发送到 dispatchEvent,以便拖动在正确的位置完成?
感谢您的宝贵时间。
已解决: 通过使用指定的事件,我能够使用一些函数来模拟拖动:
function simulate(element, eventName)
{
var options = extend(defaultOptions, arguments[2] || {});
var oEvent, eventType = null;
for (var name in eventMatchers)
{
if (eventMatchers[name].test(eventName)) { eventType = name; break; }
}
if (!eventType)
throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
if (document.createEvent)
{
oEvent = document.createEvent(eventType);
if (eventType == 'HTMLEvents')
{
oEvent.initEvent(eventName, options.bubbles, options.cancelable);
}
else
{
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
}
element.dispatchEvent(oEvent);
}
else
{
options.clientX = options.pointerX;
options.clientY = options.pointerY;
var evt = document.createEventObject();
oEvent = extend(evt, options);
element.fireEvent('on' + eventName, oEvent);
}
return element;
}
function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
var eventMatchers = {
'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
pointerX: 0,
pointerY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
bubbles: true,
cancelable: true
}
这个函数取自另一个我现在找不到的问题。(抱歉。)
我是这样使用它的:
function mouseDragStart(node){
console.log("Starting drag...");
//console.log(node.offsetTop);
//console.log(node.offsetLeft);
triggerMouseEvent(node,"mousedown")
}
function mouseDragEnd(node){
console.log("Ending drag...");
//console.log(node.offsetTop);
//console.log(node.offsetLeft);
simulate(node, "mousemove" , {pointerX: node.offsetLeft + 5 , pointerY: node.offsetTop + 5})
simulate(node, "mouseup" , {pointerX: node.offsetLeft + 5 , pointerY: node.offsetTop + 5})
}
我能够使用仅适用于元素的那些事件来模拟鼠标拖动。