{"id":15365933,"url":"https://github.com/andywer/drag-mock","last_synced_at":"2025-07-24T14:36:47.915Z","repository":{"id":26896052,"uuid":"30357461","full_name":"andywer/drag-mock","owner":"andywer","description":"Trigger HTML5 drag \u0026 drop events for testing","archived":false,"fork":false,"pushed_at":"2017-02-22T14:13:06.000Z","size":65,"stargazers_count":35,"open_issues_count":4,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-05T19:09:58.012Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andywer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-05T13:46:07.000Z","updated_at":"2023-03-24T18:13:20.000Z","dependencies_parsed_at":"2022-08-31T13:51:44.863Z","dependency_job_id":null,"html_url":"https://github.com/andywer/drag-mock","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/andywer/drag-mock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fdrag-mock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fdrag-mock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fdrag-mock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fdrag-mock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andywer","download_url":"https://codeload.github.com/andywer/drag-mock/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fdrag-mock/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266856615,"owners_count":23995714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T13:16:44.723Z","updated_at":"2025-07-24T14:36:47.852Z","avatar_url":"https://github.com/andywer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# drag-mock\n[![Build Status](https://travis-ci.org/andywer/drag-mock.svg?branch=master)](https://travis-ci.org/andywer/drag-mock) [![npm version](https://badge.fury.io/js/drag-mock.svg)](http://badge.fury.io/js/drag-mock)\n\nTrigger HTML5 drag \u0026amp; drop events for testing\n\n\n## Requirements\n\nNo 3rd party libraries required. All you need is a plain website and an ES5 compatible browser (e.g. IE9+, Chrome, Firefox, ...).\n\n\n## Setup\n\n### Browser\n\nJust add the library script to your page\n\n```html\n\u003cscript src=\"http://andywer.github.io/drag-mock/drag-mock.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can then use it as a window global or as an AMD module\n\n```javascript\n// plain javascript\nvar dragSource = document.querySelector('.draggable');\nvar dropTarget = document.querySelector('.drop-zone');\n\ndragMock.dragStart(dragSource).drop(dropTarget);\n\n\n// AMD\nrequire(['dragMock'], function(dragMock) {\n  var dragSource = document.querySelector('.draggable');\n  var dropTarget = document.querySelector('.drop-zone');\n\n  dragMock.dragStart(dragSource).drop(dropTarget);\n});\n```\n\n\n### Node / Webpack\n\nInstall using\n\n```bash\nnpm install drag-mock --save-dev\n```\n\nand require it in your code\n\n```javascript\nvar dragMock = require('drag-mock');\n```\n\n\n## Usage\n\n```javascript\nvar dragSource  = document.querySelector('.draggable');\nvar dropTarget  = document.querySelector('.drop-target');\nvar hoverRegion = document.querySelector('.hover-region');\n\ndragMock\n  .dragStart(dragSource)\n  .dragEnter(hoverRegion)\n  .dragOver(hoverRegion)\n  .dragLeave(hoverRegion)\n  .delay(500)\n  .drop(dropTarget);\n```\n\nIf you would like to set some properties on the event object you may pass an optional properties object as second\nparameter:\n\n```javascript\nvar dragSource = document.querySelector('.draggable');\nvar dropTarget = document.querySelector('.drop-target');\n\ndragMock\n  .dragStart(dragSource, { clientX: 300, clientY: 400 })\n  .drop(dropTarget, { clientX: 200, clientY: 500 });\n```\n\nYou can also customize the events by passing an optional callback function. The callback is called after creating the\nevent, but before dispatching it. If your callback takes less than two arguments then it will be called once for\nthe dragstart/drop event. It will be called for all events created if the callback takes two arguments:\n\n```javascript\ndragMock\n  .dragStart(dragSource, function(event, eventName) {\n    // will be called for all created events (mousedown, dragstart), because the callback takes two arguments\n    dragStartEvent.dataTransfer.setData('application/json', { hello: 'world' });\n  })\n  .drop(dropTarget, function(dropEvent) {\n    // a callback with less than two parameters will only be called once for the primary ('drop') event\n\n    var data = dropEvent.dataTransfer.getData('application/json');\n    console.log('Hello ' + data.hello);\n  });\n```\n\n\n## Testing\n\nUse it with the testing framework of your choice.\n\n```javascript\ndescribe('My fancy mail app', function() {\n\n  it('moves mails properly', function(done) {\n    var mail = document.querySelector('.mail[data-id=1234]');\n    var folder = document.querySelector('.folder[data-id=5678]');\n\n    dragMock.dragStart(mail).drop(folder);\n\n    var mailsInFolder = MailFolderService.getFolder(5678).getMailCount();\n    expect(mailsInFolder).to.equal(1);\n  });\n\n});\n```\n\n\n## Additional features\n\nThe following events are provided with a fake (but fully functional) dataTransfer object:\n`drag`, `dragstart`, `dragover`, `dragend`, `dragleave`, `drop`\n\n\n## webdriver.io integration\n\n**Note: Will not work with newer webdriver versions. Feel free to open a PR if you have got a fix.**\n\nIf you are running Selenium tests using webdriver.io and you need drag \u0026amp; drop functionality beyond Selenium's dragAndDrop()\nyou can easily integrate drag-mock into webdriver. CSS selectors and XPath strings are both accepted as arguments.\n\n```javascript\nvar dragMock = require('drag-mock');\nvar webdriverio = require('webdriverio');\n\nvar webdriver = webdriverio.remote({ desiredCapabilities: { browserName: 'chrome' } }).init();\n\n// set up webdriver.dragStart(), webdriver.dragOver(), webdriver.dragLeave() and webdriver.drop()\ndragMock.extendWebdriver(webdriver);\n\n// load the drag-mock library into the browser context\ndragMock.loadLibrary(webdriver);\n\n// drag and drop\nwebdriver\n  .dragStart('#my-drag-source', { clientX: 200, clientY: 300 })\n  .delay(250)\n  .drop('//*[text()=\"Drop Zone\"]', function(error) {\n    if (error) {\n      console.error(error);\n    }\n  });\n```\n\n\n## Development\n\nFirst run `npm install` to install all dependencies. `gulp dist` rebuilds the dist/ contents. `gulp test` (or `npm test`) runs the test suite. The default gulp task first runs `dist`, then `test`.\n\n\n## License\n\nThis software is licensed under the terms of the MIT license. See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fdrag-mock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandywer%2Fdrag-mock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fdrag-mock/lists"}