ObservableTypes를 사용하여 CSS 클래스 없이 드래그&#n&#Drop

많은 UI 라이브러리와 CSS 프레임워크는 CSS 클래스를 사용하여 특수 기능을 활성화하는 데 사용됩니다. 이는 jQuery 플러그인 당시 특히 유행했습니다.

매우 인기 있는 선택임에도 불구하고 확실히 프로그래밍 반대 패턴입니다.

오늘은 몇 가지 대안이 있습니다. 기능-반응 영역의 한 가지 접근 방식은 기능을 기존 요소에 "병합"하는 것을 가능하게 합니다. CSS 클래스도 없고 ID 속성 남용도 없습니다.

우리가 마음대로 추가하거나 제거할 수 있는 별도의 재사용 가능한 모듈을 통해 HTML 목록에서 드래그 앤 드롭을 활성화한다고 가정해 보겠습니다.

  <ul ...${Sortable({onOrderChange: todoList.move})}>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>

Sortable은 Mixin으로 구현될 예정입니다. 이것이 하는 일은 "DOM 개체"라고 불리는 속성, 스타일, 클래스, 이벤트 핸들러를 내보내는 것입니다. 포함된 내용은 무엇이든 대상 요소에 병합됩니다.

// sortable.ts
import { Subject, map, withLatestFrom } from 'rxjs';

export const Sortable = ({ onOrderChange }) => {
  const dragStart = new Subject<HTMLLIElement>();
  const drop = new Subject<HTMLLIElement>();

  drop.pipe(
    withLatestFrom(dragStart),
    map(([dropEvt, dragEvt]) => {
      const list = [...dragEvt.target.closest('ol,ul').children];
      return [ list.indexOf(dragEvt.target), list.indexOf(dropEvt.target.closest('li')) ]
    }),
  ).subscribe(([src, dst])=>onOrderChange(src, dst));

  // Export a DOM Object for a framework or UI library
  // to take care of and merge into the target element
  return {
    ondragstart: dragStart,
    ondragover: e=>e.preventDefault(),
    ondrop: drop,
  };
};

따라서 최종 애플리케이션 코드는 다음과 같습니다.

import { rml } from 'rimmel';

const List = () => {

  return rml`
      <ul ...${Sortable({onOrderChange: todoList.move})}>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
  `;
}

완전히 작동하는 예제를 여기에서 확인해 보세요.

위 내용은 ObservableTypes를 사용하여 CSS 클래스 없이 드래그&#n&#Drop의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!