[javascript] MediumEditor에서 드래그 앤 드롭으로 콘텐츠 이동하기

30 Nov 2023

javascript

MediumEditor는 웹 위지위그(WYSIWYG) 편집기로, 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 기능을 제공합니다. MediumEditor를 사용하면 텍스트를 선택하고 복사, 잘라내기, 붙여넣기 등의 작업을 할 수 있습니다. 이외에도 MediumEditor는 드래그 앤 드롭으로 콘텐츠 이동을 지원합니다.

MediumEditor에서 드래그 앤 드롭 활성화하기

MediumEditor에서 드래그 앤 드롭 기능을 활성화하려면 dragAndDrop 옵션을 true로 설정해야 합니다. 아래의 예시 코드를 참고해주세요.

var editor = new MediumEditor('.editable', {
    dragAndDrop: true
});

위의 코드에서 .editable은 MediumEditor를 적용할 편집 가능한 요소의 CSS 선택자입니다. 이 부분을 실제로 사용하는 요소의 선택자로 변경해주세요.

콘텐츠 이동하기

MediumEditor에서 드래그 앤 드롭으로 콘텐츠를 이동하기 위해서는 이동하고자 하는 요소의 draggable 속성을 true로 설정해야 합니다. 또한, 원하는 위치로 이동할 수 있도록 이동을 처리하는 코드도 작성해야 합니다. 아래의 예시 코드를 참고해주세요.

var elements = document.getElementsByClassName('editable');

Array.from(elements).forEach(function(element) {
    element.addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text/plain', this.innerHTML);
        e.dataTransfer.effectAllowed = 'move';
        this.classList.add('dragging');
    });

    element.addEventListener('dragend', function(e) {
        this.classList.remove('dragging');
    });

    element.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });

    element.addEventListener('dragleave', function(e) {
        this.classList.remove('dragover');
    });

    element.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');

        var sourceContent = e.dataTransfer.getData('text/plain');
        var targetContent = this.innerHTML;

        this.innerHTML = sourceContent;
        e.target.innerHTML = targetContent;
    });
});

위의 코드에서 .editable은 MediumEditor를 적용한 요소의 CSS 클래스입니다. 이 부분을 실제로 사용하는 요소의 클래스로 변경해주세요.

위의 코드는 dragstart, dragend, dragover, dragleave, drop 이벤트를 사용하여 드래그 앤 드롭 동작을 처리합니다. 이동을 처리하는 부분은 drop 이벤트 핸들러에 작성되어 있습니다.

드래그 앤 드롭으로 콘텐츠 이동이 MediumEditor에서 제대로 작동하기 위해서는 위의 예시 코드를 알맞게 커스터마이징해야 합니다.

결론

MediumEditor에서 드래그 앤 드롭으로 콘텐츠를 이동하기 위해서는 dragAndDrop 옵션을 활성화해야 하며, 콘텐츠 이동을 위한 이벤트 핸들러를 구현해야 합니다. 위의 예시 코드를 참고하여 MediumEditor에서 콘텐츠 이동 기능을 구현해보세요.