Перетаскивание JavaScript - внешний скрипт

Question

Проблема, с которой я сталкиваюсь, довольно проста, но ее трудно решить. Я пытаюсь создать скрипт, который будет играть в шахматы для меня, используя движок, который решает, какую часть (ладья, епископ, король, королева) мне нужно переместить туда.

Как переместить инструмент? Перемещение инструмента происходит путем перетаскивания, что является моей главной проблемой прямо сейчас, я не могу перетащить кусок на свое место.

Я попробовал следующую последовательность в моем коде:

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/ когда правая кнопка мыши и, глядя на прослушивателях событий в вкладке Элементов I могут видеть только следующие события:

• нажмите
• ContextMenu
• ошибка
• нагрузка
• MouseDown
• MouseUp
• touchstart

И, принимая взгляд на Источники вкладки Я также мог видеть, что есть touchend, touchmove и mousemove события

каждый из них вызывает функцию: touchend и MouseUp вызывает падение, которое:

function drop(eventArgs){ 
    preventEvent(eventArgs); 
    callback && callback(eventArgs); 
    select(); 
} 

в то время как TouchMove и MouseMove призывают ход:

function move(eventArgs){ 
    if(!selection || !callback){ 
    return; 
    } 

    callback(eventArgs); 
    select(); 
} 

Мой вопрос сводится к тому, как смогу ли я смоделировать перетаскивание с этими событиями только потому, что у меня нет каких-либо других событий, с которыми приходится иметь дело, и как я смогу «дать» перетаскивание, куда нужно отказаться или с чего начать, только с элементами?

Моя конечная цель - это функция, которая дает 2 аргумента для работы с двумя элементами. В этой функции должен быть код для перетаскивания из element1 (первый аргумент) в element2 (второй аргумент)

Спасибо за ваше время.

EDIT:

мне удалось вызвать движение и функции падения, используя следующие функции:

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, где я хочу, чтобы перетащить его в.

Проблема заключается в том, что элемент перетаскивается в верхний левый угол экрана, а не в нужное место, устанавливая точку останова в функции капли, которая возникает непосредственно после функции перемещения, теперь я могу видеть, что элемент не в нужном месте, поэтому он не работает.

В любом случае, я могу получить координаты элементов и отправить их в диспетчеру, чтобы перетащить в нужное место?

Спасибо за ваше время.

Answer 1

РЕШИТЬ: Используя указанные события я был в состоянии использовать несколько функций для имитации сопротивления:.

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}) 
} 

Я был в состоянии имитировать MouseDrag используя те события, которое работает только на элементах.