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

我正在使用Selenium simulateDragDrop使用2个JS对象（要拖动的对象和目标对象）调用JavascriptExecutor。问题是当我想要将第一个对象放在某个位置而不是放在某个对象上时，它会将它放在目标对象的左上角。

如何更改脚本（或者可能使用不同的脚本），以便接受放置的位置（如果可能的话......）？
我可以更改脚本以使其落在目标对象的中心吗？

一个小小的注意事项是它用于自动化测试目的，并且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);一起使用，方法是将元素作为第一个参数拖放，将偏移量放在第二个和第三个参数中：

$(document).ready(function() {
  $('.footerLinks li').hover(
    function() {
      $(this).siblings().stop().fadeTo(500, 0.4)
    },
    function() {
      $(this).siblings().stop().fadeTo(500, 1.0)
    }
  )
});

如何使用jQuery在特定位置删除JavaScript对象？

1 个答案: