Ngx-drag-scroll: ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด๋ฆ„์„ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 09์›” 17์ผ  ยท  13์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: bfwg/ngx-drag-scroll

์„ธ๋ถ€

angular2-drag-scroll ๋ผ๋Š” ์ด๋ฆ„์€ angular2+๋ฅผ ๋‹จ์ˆœํžˆ angular๋ผ๊ณ  ๋ถ€๋ฅด๊ณ  angular1.x๋ฅผ angularjs๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์•ฝ๊ฐ„ ๊ตฌ์‹์ž…๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์‚ฌ์‹ค ์ €๋Š” angular-drag-scroll ๋˜๋Š” ngx-drag-scroll ์ค‘ ํ•˜๋‚˜๊ฐ€ ์ข‹์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  13 ๋Œ“๊ธ€

์ด๋ฆ„์— ๋Œ€ํ•œ ํˆฌํ‘œ๊ฐ€ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” angular-drag-scroll ๋˜๋Š” ngx-drag-scroll ๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‘˜ ๋‹ค ์ข‹์•„ํ•œ๋‹ค. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ณธ์งˆ์ ์œผ๋กœ ์บ๋Ÿฌ์…€์ด๋ฏ€๋กœ carousel ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๋‹จ์–ด๋ฅผ ์ด๋ฆ„์˜ ์ผ๋ถ€๋กœ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? ์ด๋ฆ„์„ ์งง๊ณ  ์ง๊ด€์ ์œผ๋กœ ์œ ์ง€ํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๐Ÿ˜„

์‚ฌ์‹ค ์ €๋Š” angular-drag-scroll ๋˜๋Š” ngx-drag-scroll ์ค‘ ํ•˜๋‚˜๊ฐ€ ์ข‹์Šต๋‹ˆ๋‹ค.

ngx-drag-scroll์ด ๋” ์ ์ ˆํ•ด ๋ณด์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ https://github.com/QuentinPetel/ngx-drag-scroll ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์ด ํ”„๋กœ์ ํŠธ์˜ ํฌํฌ์—๋Š” ์ด๋ฏธ ๊ทธ ์ด๋ฆ„์ด ์žˆ์Šต๋‹ˆ๋‹ค(์ฐธ์กฐ: https://www.npmjs.com/package/ngx-drag-scroll ) .

๋”ฐ๋ผ์„œ - ngx-drag-scroll-all ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฑด ๋„ˆ๋ฌด ๋‚˜์ฉ๋‹ˆ๋‹ค. ngx-drag-scroll-all ์ด(๊ฐ€) ๋„ˆ๋ฌด ๊น๋‹ˆ๋‹ค. angular-drag-scroll ์™€ ์ง€๊ธˆ ๋น„๊ตํ•˜๋ฉด ํฐ ์ฐจ์ด๊ฐ€ ์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

ngx-draggable-scroll ?

์Œ - ๋‹ค๋ฅธ ๊ฒƒ์€ ํฌํฌ ์†Œ์œ ์ž์™€ ํ˜‘์ƒํ•˜๊ณ  ngx-drag-scroll์ด๋ผ๋Š” ์ด๋ฆ„์„ ์–ป์œผ๋ ค๊ณ  ์‹œ๋„ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ ์ ˆํ•ด ๋ณด์ž…๋‹ˆ๋‹ค.

@yluijten ์ข‹์€ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค. ์ œ ๊ฑฑ์ •์€ ์ด ์ด๋ฆ„์ด drag-scroll ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ง€์‹œ๋ฌธ ์ด๋ฆ„๊ณผ ์ผ์น˜ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@akkumar ๋‚˜๋Š” ngx-drag-scroll ์˜ ์†Œ์œ ์ž์—๊ฒŒ ์ด๋ฉ”์ผ์„ ๋ณด๋ƒˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฐ€ ๊ทธ ์ด๋ฆ„์„ ๋Š๋‚„ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ ˆ๋Œ€์ ์œผ๋กœ ! ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ์œ„ํ•ด ํฌํฌ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. npm ํŒจํ‚ค์ง€์™€ ํ•จ๊ป˜ ์‚ญ์ œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

@bfwg Github ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๊ฐ€ ์‚ญ์ œ๋˜๊ณ  npm ํŒจํ‚ค์ง€ ์†Œ์œ ๊ถŒ์ด ์ด์ „๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

@QuentinPetel ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ๋‚ด ํ•˜๋ฃจ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค!

@akkumar NPM๋ฟ๋งŒ ์•„๋‹ˆ๋ผ Github์—์„œ ํ”„๋กœ์ ํŠธ ์ด๋ฆ„์„ ์—…๋ฐ์ดํŠธํ–ˆ์Šต๋‹ˆ๋‹ค. ์ปดํ“จํ„ฐ์—์„œ ์ƒˆ๋กœ์šด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋ชจ๋“  ๊ฒƒ์ด ์ƒˆ ์ด๋ฆ„๊ณผ ๋ชจ๋“  ๊ฒƒ์ด ์—ฌ์ „ํžˆ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

npm ์‚ฌ์šฉ์ž ์ด๋ฆ„์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์›ํ•˜์‹ ๋‹ค๋ฉด NPM์˜ ์ด ํ”„๋กœ์ ํŠธ์— ๊ท€ํ•˜์˜ ์ด๋ฆ„์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค.

ํŒจํ‚ค์ง€.json

"ngx-drag-scroll": "1.5.2"

app.module.ts

import { DragScrollModule } from 'ngx-drag-scroll';

์—ฌํƒœ๊นŒ์ง€๋Š” ๊ทธ๋Ÿฐ๋Œ€๋กœ ์ž˜๋๋‹ค.

๋‚ด npm ์‚ฌ์šฉ์ž ์ด๋ฆ„์€ akkumar ์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰