jquery 수평 드래그하여 삭제-프런트엔드 Q&A-php.cn

jquery 수평 드래그하여 삭제

王林

풀어 주다： 2023-05-11 21:39:05

원래의

537명이 탐색했습니다.

인터넷 기술이 지속적으로 발전함에 따라 웹 사이트 페이지의 상호 작용에 대한 요구가 점점 더 높아지고 있습니다. 수평 드래그 및 삭제는 가장 일반적인 상호 작용 시나리오 중 하나입니다. 이 기능을 구현할 때 jQuery는 이 기능을 빠르게 구현하는 데 도움이 되는 매우 유용한 도구입니다. 이번 글에서는 jQuery를 사용하여 가로 드래그 및 삭제 기능을 구현하는 방법을 자세히 소개하겠습니다.

1. 기능적 요구사항

구체적인 구현에 앞서 기능적 요구사항을 살펴보겠습니다.

요소를 마우스로 클릭하면 요소가 드래그 가능해집니다.
마우스를 가로로 드래그하면 요소도 마우스와 함께 이동합니다.
요소와 페이지 오른쪽 가장자리 사이의 거리가 특정 값에 도달하면 해당 요소가 자동으로 사라집니다.
드래그 과정에서 마우스를 놓거나 요소를 지정된 영역으로 드래그하여 요소를 삭제할 수 있습니다.

2. 구현 단계

기능적 요구 사항이 충족되면 구체적인 구현을 시작할 수 있습니다. 구체적인 단계는 다음과 같습니다.

1. jQuery 라이브러리 도입

이 기능을 구현하기 전에 먼저 HTML 페이지에 jQuery 라이브러리를 도입해야 합니다. 이번 글에서는 jQuery의 CDN 링크를 소개하겠습니다. 코드는 다음과 같습니다.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

로그인 후 복사

2. HTML 요소 추가

HTML 페이지에서 드래그 및 삭제해야 하는 요소를 추가합니다. 코드는 다음과 같습니다.

<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>
<div class="item">元素4</div>
<div class="item">元素5</div>

로그인 후 복사

그 중 .item은 각 요소에 추가한 클래스 이름으로, 나중에 사용하게 됩니다. .item是我们为每个元素添加的类名，后面将会用到。

3.添加CSS样式

为每个元素设置相应的样式，代码如下：

.item {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    float: left;
    cursor: move;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

로그인 후 복사

其中，设置了元素的宽度、高度、背景颜色、圆角、文本居中、右边距、浮动和鼠标样式等相关属性，并添加了一个clearfix类，用于清除浮动。

4.添加JS交互代码

添加相应的JS代码，实现拖动删除功能，代码如下：

$(function () {
    var startX = 0;
    var endX = 0;
    var offsetX = 0;
    var isMoved = false;
 
    // 当鼠标按下时
    $('.item').on('mousedown', function (e) {
        startX = e.clientX;
        $(this).css('cursor', 'grabbing');
        isMoved = false;
    });
 
    // 当鼠标移动时
    $(document).on('mousemove', function (e) {
        if (startX === 0) {
            return;
        }
        endX = e.clientX;
        offsetX = endX - startX;
        $('.item').css('transform', 'translateX(' + offsetX + 'px)');
        if (Math.abs(offsetX) > 10) {
            isMoved = true;
        }
    });
 
    // 当鼠标抬起时
    $(document).on('mouseup', function () {
        $('.item').css('transform', 'translateX(0px)');
        $('.item').css('cursor', 'move');
 
        if (isMoved) {
            if (offsetX > 100) {
                $(this).remove();
            }
        }
        startX = 0;
        endX = 0;
        offsetX = 0;
        isMoved = false;
    });
});

로그인 후 복사

以上代码实现了当鼠标按下时，将元素添加相应的transform属性，使元素跟随鼠标移动，并在拖动过程中判断是否需要删除该元素。

三、注意事项

在实现横向拖动删除功能时，需要注意以下几点：

1.为每个元素添加相应的cursor属性，使鼠标在元素上时能够显示相应的鼠标样式。

2.在使用transform

3. CSS 스타일 추가

각 요소에 해당 스타일을 설정합니다. 코드는 다음과 같습니다.

rrreee

그 중 너비, 높이, 배경색, 둥근 모서리, 텍스트 가운데 맞춤, 오른쪽 여백, 플로팅 및 마우스 스타일입니다. 요소 및 기타 관련 속성이 설정되었으며 부동 소수점을 지우기 위한 clearfix 클래스가 추가되었습니다.

4. JS 상호작용 코드 추가 🎜🎜드래그 및 삭제 기능을 구현하기 위해 해당 JS 코드를 추가합니다. 🎜rrreee🎜위 코드는 마우스를 눌렀을 때 >요소가 마우스 움직임을 따르도록 하고 드래그하는 동안 요소를 삭제해야 하는지 여부를 결정하는 속성입니다. 🎜🎜3. 주의사항🎜🎜 가로 드래그 및 삭제 기능을 구현할 때 다음 사항에 주의해야 합니다. 🎜🎜1. 마우스를 놓았을 때 해당 cursor 속성을 각 요소에 추가합니다. 해당 마우스 스타일을 표시하는 기능 요소에 있습니다. 🎜🎜2. transform 속성을 사용할 때 다른 브라우저와 호환되도록 하려면 특정 브라우저 커널을 사용해야 합니다. 🎜🎜3. 브라우저가 정지되는 빈번한 다시 그리기를 방지하려면 마우스 움직임 이벤트를 흔들림 방지해야 합니다. 🎜🎜4. 요약🎜🎜위 단계를 통해 jQuery를 이용하여 가로 드래그 및 삭제 기능을 성공적으로 구현했습니다. 실제 개발에서는 애니메이션 효과를 추가하여 사용자 상호 작용 경험을 향상시킬 수도 있습니다. 이 글이 여러분에게 도움이 되기를 바라며, 향후 실제 개발에서도 jQuery와 관련 기술을 유연하게 활용하여 더욱 풍부한 인터랙티브 효과를 얻을 수 있기를 바랍니다. 🎜

위 내용은 jquery 수평 드래그하여 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!