{"id":22345784,"url":"https://github.com/gerhynes/click-and-drag","last_synced_at":"2026-04-13T08:31:25.240Z","repository":{"id":106044596,"uuid":"109584231","full_name":"gerhynes/click-and-drag","owner":"gerhynes","description":"A click and drag slider effect. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-03-05T23:19:38.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-09T02:09:13.306Z","etag":null,"topics":["javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/click-and-drag/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-05T13:59:29.000Z","updated_at":"2018-11-27T18:12:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"02c06c76-0e70-487d-9498-d361a6d386ec","html_url":"https://github.com/gerhynes/click-and-drag","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gerhynes/click-and-drag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fclick-and-drag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fclick-and-drag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fclick-and-drag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fclick-and-drag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/click-and-drag/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fclick-and-drag/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31746101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T06:26:45.479Z","status":"ssl_error","status_checked_at":"2026-04-13T06:26:44.645Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["javascript","javascript30"],"created_at":"2024-12-04T09:18:42.108Z","updated_at":"2026-04-13T08:31:25.221Z","avatar_url":"https://github.com/gerhynes.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Click and Drag to Scroll\n\nA click and drag slider effect. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of the Click and Drag page](https://res.cloudinary.com/gerhynes/image/upload/v1518469513/Screenshot-2018-2-12_Click_and_Drag_yzlume.png)](https://gk-hynes.github.io/click-and-drag/)\n\n## Notes\n\nWhen you click down, you want to add a class of `active` to the slider, and figure out where you clicked down. Then when you move your mouse the div will scroll the same amount.\n\nFirst, select the slider, i.e. the `items` div.\n\nLet `isDown` equal `false`. This is your flag variable, which will be `true` or `false` depending on whether you are clicking.\n\nCreate two variables, `startX` and `scrollLeft`. They will be assigned values in the events.\n\nAttach event listeners for `mousedown`, `mouseup`, `mouseleave`, and `mousemove`.\n\nWhen someone mouses down, take the `isDown` variable and set it to `true`.\n\nWhen the mouse leaves the area or someone mouses up, set `isDown` to `false`.\n\nInside the mousemove function, if `isDown` is `false`, `return`. This will stop the function from running.\n\nWhen you mousedown add a class of `active` to the slider. When the mouse leaves or someone mouses up, remove this class.\n\nWhen you click down, you need to know where that anchor point is. This is what `startX` is for.\n\nPass the event to the mousedown function. You need to know where the user clicks inside of the slider, not on the page in general (to account for margin etc.).\n\n`startX = e.pageX - slider.offsetLeft;`\n\nYou also need to figure out where the initial scroll was when you started it. This is what `scrollLeft` is for.\n\n`scrollLeft = slider.scrollLeft;`\n\nInside the mousemove function call `e.preventDefault()` to avoid accidentally selecting text inside the slider.\n\nAt this point you know where the cursor is when you initially click down. You also want to know where it is every time you move it left or right.\n\n`const x = e.pageX - slider.offsetLeft;`\n\nThe walk is equal to the `x` value minus the value of `startX`. This tells you how far you have moved from the initial position.\n\nFinally, to scroll the slider, set `slider.scrollLeft` equal to `scrollLeft - walk;`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fclick-and-drag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fclick-and-drag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fclick-and-drag/lists"}