jQuery를 왼쪽 슬라이드에서 삭제하세요.-프런트엔드 Q&A-php.cn

jQuery를 왼쪽 슬라이드에서 삭제하세요.

WBOY

풀어 주다： 2023-05-14 09:19:06

원래의

682명이 탐색했습니다.

최신 웹 애플리케이션 개발에서 상호 작용 디자인은 종종 중요한 부분입니다. 좋은 사용자 경험을 결정하는 요소 중 하나는 적절한 상호 작용 형태입니다.

그 중 스와이프하여 삭제는 목록 항목이나 카드와 같은 요소를 삭제하는 데 널리 사용됩니다. 예를 들어 메일 애플리케이션에서 이메일을 삭제하거나 소셜 네트워크 애플리케이션에서 업데이트를 삭제하는 등입니다.

기존 웹 개발에서 왼쪽 스와이프 삭제를 구현하려면 일반적으로 DOM 작업 및 스타일 제어를 수동으로 처리해야 합니다. 그러나 이제 jQuery에서 제공하는 이벤트 및 애니메이션 라이브러리는 왼쪽 스와이프로 삭제를 구현하는 방법을 크게 단순화하고 풍부하게 만들었습니다.

다음으로 jQuery를 사용하여 간단한 왼쪽 스와이프 삭제 효과를 구현해 보겠습니다.

기본 상호 작용 구현

먼저 HTML 페이지에서 목록 항목이 포함된 컨테이너 요소를 정의하고 그 안에 삭제 버튼이 포함된 블록 요소를 추가해야 합니다. 여기에는 FontAwesome 글꼴 아이콘 라이브러리에서 제공하는 삭제 아이콘이 사용되며 삭제 버튼에 몇 가지 기본 스타일을 추가해야 합니다.

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete"> <i class="fa fa-trash"></i> </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

로그인 후 복사

위 코드는 범위 요소가 포함된 높이 50픽셀의 목록 항목 컨테이너를 정의합니다. (목록 항목 내용을 표시하는 데 사용됨) 및 삭제 버튼 요소. 컨테이너 요소에는 삭제 버튼 요소를 숨기도록 설정된 Overflow:hidden 속성이 있습니다. 삭제 버튼 요소는 삭제를 위해 왼쪽으로 밀 때 애니메이션 효과를 얻기 위해 오른쪽에 절대 위치 지정과 음수 오프셋으로 설정됩니다.

다음으로, 왼쪽 스와이프 삭제 로직을 처리하기 위해 삭제 버튼 요소에 대한 jQuery 마우스 터치 이벤트 모니터링을 추가합니다. 왼쪽 스와이프 삭제 구현으로 인해 기본적으로 마우스의 이동 거리에 따라 삭제 버튼의 위치가 변경되므로 마우스 이동 이벤트를 모니터링해야 합니다.

$(document).on("mousemove swipeleft",".list-item",function(e){
    var $delete = $(this).find('.delete');
    var left = e.pageX - $(this).offset().left;   
    if (left > $(this).width()/2) {
        $delete.css('right', 0);
    } else {
        $delete.css('right', '-50px');
    }
});

로그인 후 복사

위 코드에서는 jQuery의 on() 메서드를 사용하여 마우스 이동 및 터치 이벤트(왼쪽 슬라이드 이벤트)를 수신합니다. 그런 다음 요소 왼쪽을 기준으로 마우스 거리를 가져오고 요소 너비의 절반을 기준으로 삭제 버튼의 위치를 결정합니다. 마우스 이동 거리가 요소 너비의 절반을 초과하면 오른쪽 오프셋 애니메이션 삭제 버튼 요소는 0으로 전환되고, 그렇지 않으면 오른쪽 오프셋 애니메이션이 -50px로 전환되어 삭제 버튼을 요소로 밀어 넣습니다.

삭제 작업 추가

왼쪽으로 스와이프하여 삭제하는 상호작용을 처리한 후 삭제 작업의 논리를 구현하는 방법도 고려해야 합니다. 이를 달성하는 간단한 방법은 jQuery의 Remove() 메소드를 사용하여 요소를 삭제하는 것입니다. 여기서 구현은 삭제할 오른쪽 슬라이드가 트리거된 후 클릭 이벤트 리스너를 추가하는 것입니다. 여기서 요소는 Remove() 메서드를 호출하여 DOM 트리에서 제거됩니다.

$(document).on("click",".delete",function(e){
    e.stopPropagation();
    $(this).parent().remove();
});

로그인 후 복사

위 코드에서는 jQuery의 stopPropagation() 메서드를 사용하여 클릭 이벤트가 상위 요소까지 버블링되어 왼쪽 스와이프 삭제 모니터링에 영향을 미치는 것을 방지합니다.

완전한 코드

마지막으로 위의 두 부분의 코드를 합치면 완전한 jQuery 왼쪽 슬라이드 삭제 구현 코드를 얻을 수 있습니다.

<div class="list-item">
    <span>这是一个列表项</span>
    <div class="delete">
        <i class="fa fa-trash"></i>
    </div>
</div>

<style>
    .list-item {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }
    .delete {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -50px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on("mousemove swipeleft",".list-item",function(e){
        var $delete = $(this).find('.delete');
        var left = e.pageX - $(this).offset().left;   
        if (left > $(this).width()/2) {
            $delete.css('right', 0);
        } else {
            $delete.css('right', '-50px');
        }
    });

    $(document).on("click",".delete",function(e){
        e.stopPropagation();
        $(this).parent().remove();
    });
</script>

로그인 후 복사

이 코드는 jQuery 왼쪽 스와이프 삭제의 간단한 예일 뿐입니다. 완전한 세부 처리 및 적합성 최적화는 포함되어 있지 않습니다. 독자는 필요에 따라 적절하게 수정하고 확장할 수 있습니다.

위 내용은 jQuery를 왼쪽 슬라이드에서 삭제하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!