Javascript 量角器拖放

我有一个元素列表，所以我想写一个函数，将这些元素拖到一个容器中，以构建一个对象。目前在量角器测试中，我已经找到了元素。元素存在并显示。我遇到问题的唯一地方是当我试图翻译或拖放它在屏幕上的位置时。目前我正在使用

browser.actions().dragAndDrop(element1.getWebElement(), { x: -500, y: 20 }).perform();

为了尝试将其向左拖动500px，向下拖动20px，我还尝试了以下方法

browser.actions()
    .mouseDown(element1, {x:10, y:10}) //this show the hovered tool tip
    .mouseMove(element1, {x:11, y:11}) //do this to make it "grab" the element
    .mouseMove(element2, {x:50, y:50}) //translate its position into the container
    .mouseUp()
    .preform();
browser.sleep(3000)//allow time for it to drag and the animation to complete.

我不确定我是否使用了错误的移动元素，或者我是否有错误的元素，因此任何帮助都将不胜感激

---

谢谢。

我对量角器还不熟悉，我一直在讨论这个问题的每一个话题，并且看到了很多不好的建议和指南。所以我自己想出了办法。首先，量角器中不存在.dragAndDrop方法。你不需要x和y。这是我的代码：

 it('drag&drop', function() {
    var elem = element.all(by.css('.as-sortable-item-handle')).get(1);
    //select element as you find fit, you dont have to do it like me

    var target = element(by.css('[id="column1"]'));

   browser.driver.actions()
    .mouseDown(elem)
    .mouseMove(elem)
    .mouseMove(target)
    .mouseUp(target)
    .perform();
    browser.sleep(3000);
}); 

---

我对量角器是新来的，我对这方面的每一个话题都有过了解，并且看到了很多不好的建议和指南。所以我自己想出了办法。首先，量角器中不存在.dragAndDrop方法。你不需要x和y。这是我的代码：

 it('drag&drop', function() {
    var elem = element.all(by.css('.as-sortable-item-handle')).get(1);
    //select element as you find fit, you dont have to do it like me

    var target = element(by.css('[id="column1"]'));

   browser.driver.actions()
    .mouseDown(elem)
    .mouseMove(elem)
    .mouseMove(target)
    .mouseUp(target)
    .perform();
    browser.sleep(3000);
}); 

---

我也经历了许多这样的解决方案，但没有一个对我有效。我的解决方案是导入新的js文件。有一个我的js文件将此文件存储为dragdrop_helper.js

module.exports =function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    function createCustomEvent(type) {
        var event = new CustomEvent("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
    }

    function dispatchEvent(node, type, event) {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent("on" + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransfer
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

并在量角器文件中使用此代码拖放元素

 var dragAndDropFn = require("../DraodropHelper/dragdrop_helper.js"); //this is your js file address
    var source = element(by.css('li[draggable="true"]'));
    var target = element(by.css('ul[class="dropElement"]'));
    browser.executeScript(dragAndDropFn, source.getWebElement(), target.getWebElement());

---

请根据您的应用更改选择器。我希望这会对您有所帮助

我也经历了许多解决方案，但这些都不适合我。我的解决方案是导入新的js文件。有一个我的js文件将此文件存储为dragdrop_helper.js

module.exports =function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    function createCustomEvent(type) {
        var event = new CustomEvent("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
    }

    function dispatchEvent(node, type, event) {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent("on" + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransfer
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

并在量角器文件中使用此代码拖放元素

 var dragAndDropFn = require("../DraodropHelper/dragdrop_helper.js"); //this is your js file address
    var source = element(by.css('li[draggable="true"]'));
    var target = element(by.css('ul[class="dropElement"]'));
    browser.executeScript(dragAndDropFn, source.getWebElement(), target.getWebElement());

---

请根据您的应用更改选择器。我希望这能帮助您

默认的拖放功能对我不起作用。所以我使用这个Javascript在Chrome中使用量角器进行拖放

function doDnd(dragElement, dropElement) {
    const CUSTOM_JS_SCRIPT = 'function e(e,t,n,i){var r=a.createEvent("DragEvent");r.initMouseEvent(t,!0,!0,o,0,0,0,c,g,!1,!1,!1,!1,0,null),Object.defineProperty(r,"dataTransfer",{get:function(){return d}}),e.dispatchEvent(r),o.setTimeout(i,n)}var t=arguments[0],n=arguments[1],i=arguments[2]||0,r=arguments[3]||0;if(!t.draggable)throw new Error("Source element is not draggable.");var a=t.ownerDocument,o=a.defaultView,l=t.getBoundingClientRect(),u=n?n.getBoundingClientRect():l,c=l.left+(l.width>>1),g=l.top+(l.height>>1),s=u.left+(u.width>>1)+i,f=u.top+(u.height>>1)+r,d=Object.create(Object.prototype,{_items:{value:{}},effectAllowed:{value:"all",writable:!0},dropEffect:{value:"move",writable:!0},files:{get:function(){return this._items.Files}},types:{get:function(){return Object.keys(this._items)}},setData:{value:function(e,t){this._items[e]=t}},getData:{value:function(e){return this._items[e]}},clearData:{value:function(e){delete this._items[e]}},setDragImage:{value:function(e){}}});if(n=a.elementFromPoint(s,f),!n)throw new Error("The target element is not interactable and need to be scrolled into the view.");u=n.getBoundingClientRect(),e(t,"dragstart",101,function(){var i=n.getBoundingClientRect();c=i.left+s-u.left,g=i.top+f-u.top,e(n,"dragenter",1,function(){e(n,"dragover",101,function(){n=a.elementFromPoint(c,g),e(n,"drop",1,function(){e(t,"dragend",1,callback)})})})})';

    browser.executeScript(CUSTOM_JS_SCRIPT, dragElement.getWebElement(), dropElement.getWebElement());
}

---

默认的拖放功能对我不起作用。所以我使用这个Javascript在Chrome中使用量角器进行拖放

function doDnd(dragElement, dropElement) {
    const CUSTOM_JS_SCRIPT = 'function e(e,t,n,i){var r=a.createEvent("DragEvent");r.initMouseEvent(t,!0,!0,o,0,0,0,c,g,!1,!1,!1,!1,0,null),Object.defineProperty(r,"dataTransfer",{get:function(){return d}}),e.dispatchEvent(r),o.setTimeout(i,n)}var t=arguments[0],n=arguments[1],i=arguments[2]||0,r=arguments[3]||0;if(!t.draggable)throw new Error("Source element is not draggable.");var a=t.ownerDocument,o=a.defaultView,l=t.getBoundingClientRect(),u=n?n.getBoundingClientRect():l,c=l.left+(l.width>>1),g=l.top+(l.height>>1),s=u.left+(u.width>>1)+i,f=u.top+(u.height>>1)+r,d=Object.create(Object.prototype,{_items:{value:{}},effectAllowed:{value:"all",writable:!0},dropEffect:{value:"move",writable:!0},files:{get:function(){return this._items.Files}},types:{get:function(){return Object.keys(this._items)}},setData:{value:function(e,t){this._items[e]=t}},getData:{value:function(e){return this._items[e]}},clearData:{value:function(e){delete this._items[e]}},setDragImage:{value:function(e){}}});if(n=a.elementFromPoint(s,f),!n)throw new Error("The target element is not interactable and need to be scrolled into the view.");u=n.getBoundingClientRect(),e(t,"dragstart",101,function(){var i=n.getBoundingClientRect();c=i.left+s-u.left,g=i.top+f-u.top,e(n,"dragenter",1,function(){e(n,"dragover",101,function(){n=a.elementFromPoint(c,g),e(n,"drop",1,function(){e(t,"dragend",1,callback)})})})})';

    browser.executeScript(CUSTOM_JS_SCRIPT, dragElement.getWebElement(), dropElement.getWebElement());
}

---

相信我，我自己阅读了大部分内容，最后我编写了一个单独的JS文件，我导入了该文件并将其用作函数，以便在页面上拖放元素。你上面写的量角器方法对我不起作用，我使用的大多数建议也不起作用。相信我，我自己阅读了大部分内容，最后我编写了一个单独的JS文件，我导入了该文件并将其用作函数，以便在页面上拖放元素。你上面写的量角器方法对我不起作用，我使用的大多数建议也不起作用。我整个上午都在寻找这样一个解决方案，非常简洁和有用的代码！我整个上午都在寻找这样的解决方案，非常简洁和有用的代码！