如何使用jQuery在特定位置放置JavaScript對象？

Question

我是using jQuery來解決Selenium中的拖放issue。不過，我是一名jQuery初學者，並且找不到使用jQuery在特定位置放置JavaScript元素的OOTB解決方案。

我使用的腳本是這樣的：

(function($) { 
    $.fn.simulateDragDrop = function(options) { 
     return this.each(function() { 
      new $.simulateDragDrop(this, options); 
     }); 
    }; 
    $.simulateDragDrop = function(elem, options) { 
     this.options = options; 
     this.simulateEvent(elem, options); 
    }; 
    $.extend($.simulateDragDrop.prototype, { 
     simulateEvent: function(elem, options) { 
      /*Simulating drag start*/ 
      var type = 'dragstart'; 
      var event = this.createEvent(type); 
      this.dispatchEvent(elem, type, event); 

      /*Simulating drop*/ 
      type = 'drop'; 
      var dropEvent = this.createEvent(type, {}); 
      dropEvent.dataTransfer = event.dataTransfer; 
      this.dispatchEvent($(options.dropTarget)[0], type, dropEvent); 

      /*Simulating drag end*/ 
      type = 'dragend'; 
      var dragEndEvent = this.createEvent(type, {}); 
      dragEndEvent.dataTransfer = event.dataTransfer; 
      this.dispatchEvent(elem, type, dragEndEvent); 
     }, 
     createEvent: function(type) { 
      var event = document.createEvent("CustomEvent"); 
      event.initCustomEvent(type, true, true, null); 
      event.dataTransfer = { 
       data: { 
       }, 
       setData: function(type, val){ 
        this.data[type] = val; 
       }, 
       getData: function(type){ 
        return this.data[type]; 
       } 
      }; 
      return event; 
     }, 
     dispatchEvent: function(elem, type, event) { 
      if(elem.dispatchEvent) { 
       elem.dispatchEvent(event); 
      }else if(elem.fireEvent) { 
       elem.fireEvent("on"+type, event); 
      } 
     } 
    }); 
})(jQuery); 

我打電話simulateDragDrop與硒的JavascriptExecutor 2個JS對象（被拖動對象和目標對象）。問題出在我想將第一個對象放在一個位置而不是放在一個對象上，並將它放在目標對象的左上角。

1. 如何更改腳本（或者可能使用不同的腳本），以便它可以接受放置的位置（如果可能的話......）？

2. 我可以更改腳本，使其落在目標對象的中心嗎？

一個小問題是，它是爲了自動化測試的目的，並且AUT不包含jQuery，我正在注入它。

一個可能的解決方案我想過用它獲取元素使用document.elementFromPoint(x, y);位置，但仍然會砸在這個元素的左上角...

Answer 1

無需使用jQuery。這段JavaScript模擬拖放元素的下降與偏移：

var source = arguments[0], offsetX = arguments[1], offsetY = arguments[2]; 
var rect = source.getBoundingClientRect(); 
var dragPt = {x: rect.left + (rect.width >> 1), y: rect.top + (rect.height >> 1)}; 
var dropPt = {x: dragPt.x + offsetX, y: dragPt.y + offsetY}; 
var target = document.elementFromPoint(dropPt.x, dropPt.y); 

var dataTransfer = { 
    dropEffect: '', 
    effectAllowed: 'all', 
    files: [], 
    items: {}, 
    types: [], 
    setData: function (format, data) { 
    this.items[format] = data; 
    this.types.push(format); 
    }, 
    getData: function (format) { 
    return this.items[format]; 
    }, 
    clearData: function (format) { } 
}; 

var emit = function (event, target, pt) { 
    var evt = document.createEvent('MouseEvent'); 
    evt.initMouseEvent(event, true, true, window, 0, 0, 0, pt.x, pt.y, false, false, false, false, 0, null); 
    evt.dataTransfer = dataTransfer; 
    target.dispatchEvent(evt); 
}; 

emit('mousedown', source, dragPt); 
emit('mousemove', source, dragPt); 
emit('dragstart', source, dragPt); 
emit('mousemove', source, dropPt); 
emit('dragenter', target, dropPt); 
emit('dragover', target, dropPt); 
emit('drop',  target, dropPt); 
emit('dragend', source, dropPt); 
emit('mouseup', source, dropPt); 

可以通過提供元素拖動作爲第一個參數和偏移的第二和第三個參數來刪除與executeScript使用它：

driver.executeScript("...", element, -100, 0);