질문/공유팁 게시판

드래그하여 이동 애드온 - 클래스라는거... 참 느껴집니다.

skyo
조회 수 1068 추천 수 0
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

XE  바닥에 오래 있다보면

 

코딩의 코는 몰라도

 

작품 수준이 일정 수준이상인지 아닌지 알수 있을 정도는 됩니다.

 

그 기준이

 

유저 뷰에서 아이디어가 참신한지

 

진부한 아이디어의 상품이라도 안정적인지

 

뭐 여러가지 조건에 따라 다르겠지만

 

 

fafazboard.com
pjaxboard 스킨을 만든 

 

@파파즈님이 만든 아래 애드온 

https://xetown.com/index.php?mid=point_contents&member_srl=1714&document_srl=1161730

 

스와이프로 페이지간 이동이 가능한 이 애드온..

 

솔직히 오랜만에 느끼는 놀라움입니다. 일단 거두절미 하고 감사히 잘 쓰겠습니다.

 

이 애드온이 저에게 주는 의미는

이 제품을 시작으로

언젠가는 게시물간 이동 기능도 스와이프로 가능할수 있지 않을까하는 희망을 가져 볼수 있겠습니다. 언젠가는... 말이죠

 

게다가 @윤삼님의 쪽 애드온과 합쳐진다면

 

여러분들이 다음 기사에서 자주 보셨던 혹은 브런치 게시물 처럼

왼쪽에서 오른쪽으로 쓰윽 쓰익 게시물 쪽을 이동해서 보는것도 구현 가능해질것같은 희망도 가져 봅니다.

 

다시한번 @파파즈님에게 고맙습니다

skyo

?
XE타운 관리자 입니다.
관리자 아닌것 같지만 제이쿼리 엔지가 없는게 매력인 관리자 입니다.
위로 아래로
댓글 23
  • ?
    웹을 어플처럼 만들어버리는 마법의 애드온입니다 ㄷㄷ
  • ? ?
    네. 그냥 놀랍네요.
  • ?
    하.. 이럴때 정말 포인트를 돈주고라도 살수 있으면 좋겠습니다 ㅎㅎ
    어여 모아서 저도 적용해 보고 싶네요.
  • ? ?
    새콤달콤한 애드온입니다. 어여 받으실수 있기를~
  • profile
    스와이프는 일전에 컨텐츠 위젯의 수평형 타임라인 스킨으로 적용해본 적이 있긴 한데, 혹시라도 파파즈님 애드온이랑 충돌이 일어날까 염려가 되긴 하네요.
    조심스레 시도해보면 가능할 것 같기도 하고... 숙원사업 중에 하나였으니 한번 시도해봐야죠ㅎㅎ
  • profile profile
    벌써 두근두근합니다
  • profile ?
    앗~ 앗~ 앗~~

    저도 벌써 두근 두근 합니다~
  • profile
    과분한 평가를 주셨네요 감사합니다!
    "언젠가는 게시물간 이동 기능도 스와이프로 가능할수 있지 않을까"에 대해서는..
    정확히 어떤 형태로 구현되었으면 하시는건지 이해가 잘 안되네요.
    기술적으로 복잡한 건 딱히 없을 것 같구용
    좀 더 디테일한 제안 주시면 한번 구상해볼게요
  • profile profile
    '이전글', '다음글' 이동하는 것을 스와이프로 해주세욤!!!
    쿼리 남발이 우려되신다면 필수 말고 옵션으로라도 넣어주시면 좋을 것 같아요~
  • profile ?

    넵. 윤삼님 설명 그대로 입니다.
    게시물 안(읽기)에서 이전글 다음글 기능이 있는데

     

    스와피로 해당 기능 처럼 이전/다음 글 이동이 되면 좋겠습니다.^^

     

     

  • profile profile

    next.png

     

    대부분 스킨에서 게시글을 읽는 화면에서 이전글,다음글 의 글 번호를 쿼리해서 문서번호를 확보해 놓은다음 현재 글을 읽고 난 후 연속해서 해당 게시판의 글을 계속 읽어가는 수요를 위해 이전글,다음글 링크를 제공합니다.

     

     

    별도로 본문의 영역의 id를 지정할 수 있고 해당 id 영역에서 좌우 스와이프로 다음페이지가 아닌 다음글,이전글로 동작하는 기능이 추가되었으면 하는 요청입니다.

     

    개인적으로 계획하신 댓글 페이지 이동의 스와이프 동작보다는 사실 본문의 다음글,이전글 이동이 수요가 훨씬 많습니다. 다만 구현이 조금더 복잡하고 이전글,다음글의 주소를 확보해야 하는 작업이 필요하다는 점이 고려 할 부분이라 생각 됩니다.

    - 스케치북5 스킨에는 글 하단에 링크가 있고 추가적으로 키보드의 방향키 좌,우와 매핑되어 있습니다. 이런 기능을 이야기 하는 것입니다.

    https://github.com/sketchbook/xe/blob/master/modules/board/skins/sketchbook5/_read.html#L191

     

    댓글 이동은 댓글이 페이지로 구분되는 사레가 사실 흔하지는 않습니다. 각 파트별로 개별 기능으로 동작한다면 나쁘지는 않죠.

  • profile profile
    쿼리 남말에 관한 아이디어가 떠오르긴 했는데 이게 모든 스킨에 필수적으로 가지고 있지 않을 수 있고 사용 가능한지도 의문이긴 하지만...

    스킨에서 가져온 url을 이용하면 따로 추가로 쿼리 하지 않고도 가능하지 않을까 하는 생각도 해보게 되네요.
  • profile profile
    역시 아이디어 뱅크십니다ㄷㄷ
    말씀하신대로 스킨 따라 사정이 달라서 조금 애매하긴 하겠네요.
    그래도 몇몇 유명 스킨의 경우엔 따다 쓸 수도 있지 싶어요.
    유명한 스킨이 아닌 걸로 확인되면 그 때 쿼리 실행하구요 ㅎㅎ
  • profile
    확실히 이전글 다음글에 대한 수요가 더 많은 것 같네요.
    애초에 페이지 이동이라는 컨셉을 잡고 시작한거라 댓글 쪽을 지원하는게 맞겠다 싶긴했는데..
    생각해보니 다음 카페랑은 좀 다르게 댓글이 몇십개씩 달릴 일은 잘 없긴 하죠.
    시간 나는대로 이전글 다음글 작업해보겠습니다. ^^
  • profile profile
    파파즈님 문의가 있어요~
    이전글-다음글 스와이프 작업하시게 되면 혹시 스와이프가 작동하지 않는 영역을 따로 설정하는 것도 가능하실까요?
    쪽 나누기 애드온에 스와이프를 넣으려다보니 이게 결국엔 본문 내에서 작동하는 것이어서 충돌이 일어날 수 있겠더라구요.

    저는 본문 내에 '.ap_pager_content'라는 요소를 삽입하고 여기에 국한해서 스와이프를 적용하려 하는데요. 파파즈님 애드온에서 이 영역이 예외가 되면 충돌을 막을 수 있겠다 싶거든요.

    암튼 남은 휴일 잘 보내셔요~
  • profile profile
    사용하시는 라이브러리에서 stop propagation 옵션이 있는지 확인해보세요..
    이벤트 전파를 막는 이벤트 핸들러 내부 메서드이구요.

    (같은 이벤트 타입에 등록된 핸들러의 실행을 막는 우선권 같은 기능입니다.)
    제가 예외처리하려면 한번 터치할 때마다 수십번씩 실행되는 이벤트핸들러에서
    지금 터치된 타겟이 어느 영역에 속하는지를 매번 비교해야해서 성능에 상당히 안좋습니다.
  • profile profile
    그런 문제가 있겠군요. 알아보겠습니다~
  • profile profile

    저희는 단순히 나열되는 것이 넘치면 스크롤이 생기는 상황입니다.

    <div style="margin:0 auto 10px auto;">
    위젯코드
    </div>

    이렇게 아주 간단한 형식입니다. 위젯스킨에서 x축이 넘치면 스크롤이 생기게 해놓아서 가로로 스와이프해서 보게 되는데요. 글쓴이의 다른 작성글 위젯입니다.

    섬네일을 보여주다 보니 가로로 배치가 되었습니다.

    위 영역에서 애드온의 동작이 안되게 하고 싶습니다. 저기에는 따로 스크립트같은게 전혀 쓰이지 않거든요.

    최후의 수단으로는 해당 부분을 옮기는 것도 고려하고 있으나 여건상 위치를 유지하는게 좋아서요.

  • profile profile
    습관적으로 return false를 넣어놨는데 일단 예제를 보면 그걸로도 되는가 봅니다.
    http://labs.rampinteractive.co.uk/touchSwipe/demos/Stop_propegation.html

    물론 실제로 테스트를 해봐야겠지만요ㅎ
  • profile profile
    var abc = document.querySelector('.abc-def');
    abc.addEventListener('touchmove', function(e) {
    e.stopPropagation();
    });

    이 코드 넣어보세요.
  • profile profile

    위젯의 스킨에 넣으라는 말씀이시죠?
     

  • profile profile
    넵 html 밑에 <script></script> 안에 넣으심 되구요.

    .abc-def 는 해당 앨리먼트 클래스명 입력해주시면 되요.
  • profile profile
    와우 잘됩니다!
    이제 게시글 다음글 이전글 스와이프 본문에서 문제없이 사용할 수 있게 준비가 되었네요~
    애드온에서 다음글 잘 찾아갈 수 있게 되면 시도해보겠습니다.