Jquery zum Löschen horizontal ziehen

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie wird die Nachfrage nach Interaktivität von Website-Seiten immer höher. Horizontales Ziehen und Löschen ist eines der häufigsten Interaktionsszenarien. Bei der Implementierung dieser Funktion ist jQuery ein sehr nützliches Tool, das uns helfen kann, diese Funktion schnell zu implementieren. In diesem Artikel wird ausführlich beschrieben, wie Sie mit jQuery die horizontale Drag-and-Delete-Funktion implementieren.

1. Funktionale Anforderungen

Vor der konkreten Implementierung werfen wir einen Blick auf die funktionalen Anforderungen:

1. Wenn die Maus auf ein Element klickt, wird das Element ziehbar.
2. Wenn die Maus horizontal gezogen wird, bewegt sich das Element mit der Maus.
3. Wenn der Abstand zwischen dem Element und dem rechten Seitenrand einen bestimmten Wert erreicht, verschwindet das Element automatisch.
4. Während des Ziehvorgangs können Sie das Element löschen, indem Sie die Maus loslassen oder das Element in den angegebenen Bereich ziehen.

2. Umsetzungsschritte

Sobald die funktionalen Anforderungen vorliegen, kann mit der konkreten Umsetzung begonnen werden. Die spezifischen Schritte sind wie folgt:

1. Einführung der jQuery-Bibliothek

Bevor Sie diese Funktion implementieren, müssen Sie zunächst die jQuery-Bibliothek in die HTML-Seite einführen. In diesem Artikel stellen wir den CDN-Link von jQuery vor. Der Code lautet wie folgt:

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

2. HTML-Elemente hinzufügen

Fügen Sie Elemente hinzu, die in die HTML-Seite gezogen und gelöscht werden müssen. Der Code lautet wie folgt:

<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>

Darunter ist item der Klassenname, den wir jedem Element hinzugefügt haben und der später verwendet wird. .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-Stile hinzufügen

Legen Sie den entsprechenden Stil für jedes Element fest. Der Code lautet wie folgt:

rrreee

Dazu gehören Breite, Höhe, Hintergrundfarbe, abgerundete Ecken, Textzentrierung, rechter Rand, schwebender Stil und Mausstil des Elements und anderer verwandter Attribute festgelegt und eine clearfix-Klasse zum Löschen von Floats hinzugefügt.

4. JS-Interaktionscode hinzufügen 🎜🎜Fügen Sie den entsprechenden JS-Code hinzu, um die Drag-and-Delete-Funktion zu implementieren. Der Code lautet wie folgt: 🎜rrreee🎜Der obige Code fügt dem Element den entsprechenden transformhinzu Maus gedrückt wird. >Eigenschaft, um das Element der Mausbewegung folgen zu lassen und zu bestimmen, ob das Element während des Ziehvorgangs gelöscht werden muss. 🎜🎜3. Hinweise🎜🎜Beim Implementieren der horizontalen Drag-and-Delete-Funktion müssen Sie auf die folgenden Punkte achten: 🎜🎜1. Fügen Sie jedem Element das entsprechende cursor-Attribut hinzu, damit beim Bewegen der Maus ist auf dem Element Möglichkeit, entsprechende Mausstile anzuzeigen. 🎜🎜2. Wenn Sie das Attribut transform verwenden, müssen Sie einen bestimmten Browser-Kernel verwenden, um mit verschiedenen Browsern kompatibel zu sein. 🎜🎜3. Mausbewegungsereignisse müssen gegen Verwacklungen geschützt werden, um häufige Neuzeichnungen zu vermeiden, die zum Einfrieren des Browsers führen. 🎜🎜4. Zusammenfassung🎜🎜Durch die oben genannten Schritte haben wir die horizontale Drag-and-Delete-Funktion mit jQuery erfolgreich implementiert. In der tatsächlichen Entwicklung können Sie auch Animationseffekte hinzufügen, um das Benutzerinteraktionserlebnis zu verbessern. Ich hoffe, dass dieser Artikel für Sie hilfreich ist, und ich hoffe auch, dass Sie jQuery und die damit verbundenen Technologien in der zukünftigen tatsächlichen Entwicklung flexibel nutzen können, um umfassendere interaktive Effekte zu erzielen. 🎜

Das obige ist der detaillierte Inhalt vonJquery zum Löschen horizontal ziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!