基于其位置的可拖动 DIV 样式

Draggable-DIV styling based on its position

本文关键字：拖动 DIV 样式 于其 位置      更新时间：2023-09-26

我正在尝试拖动一个div，在拖动过程中更改其样式：如果拖动的div 有一个"左边框"，其位置<其容器宽度的 是=" 有一个="左边框">其容器宽度的 50%）只有"右边框"是 8px。这是一个演示。

网页代码：

<div id="container">
    <div class="draggable right">
        <span id="border_left_position_percentage"></span>
    </div>
</div>

CSS代码：

body {
    border: 0;
    margin: 0;
    padding: 0;
}
#container {
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
}
.draggable {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
.right {
    position: absolute;
    float: right;
    right: 0;
    border-right: 8px solid blue;
    border-radius: 10px 0 0 10px;
}
#border_left_position_percentage {
    padding: 20px;
    display: none;
}

JavaScript 代码：

$(function () {
    $(".draggable").draggable();
    if ($(".draggable").draggable()) {
        $(".right").css("cursor", "all-scroll");
    } else {
        $(".right").css("cursor", "normal");
    }
    $(".right").on('dragstart', function () {
        $(this).on("mousemove", function () {
            var percentuale = parseInt((($(this).position().left / $(this).parent().width()) * 100), 10);
            $("#border_left_position_percentage").html(percentuale + "%");
            if (percentuale < 50) {
                $(this).css({
                    "border-right": "none",
                    "border-left": "8px solid blue",
                    "border-radius": "0 10px 10px 0"
                });
                $("#border_left_position_percentage").css({
                    "float": "right",
                    "display": "block"
                });
            } else {
                $(this).css({
                    "border-right": "8px solid blue",
                    "border-left": "none",
                    "border-radius": "10px 0 0 10px"
                });
                $("#border_left_position_percentage").css({
                    "float": "left",
                    "display": "block"
                });
            }
        });
    }).on("dragstop", function () {
        var percentuale = parseInt((($(this).position().left / $(this).parent().width()) * 100), 10);
        if (percentuale < 50) {
            $(this).animate({
                "position": "absolute",
                "float": "left",
                "left": "0",
                "border-radius": "0 10px 10px 0"
            }, 2000, function () {
                // Animation complete.
                $("#border_left_position_percentage").css("display", "none");
            });
        } else {
            $(this).animate({
                "position": "absolute",
                "float": "right",
                "right": "0",
                "border-radius": "10px 0 0 10px"
            }, 2000, function () {
                // Animation complete.
                $("#border_left_position_percentage").css("display", "none");
            });
        }
    });
});
我只想在拖动过程中显示"左边框"位置的百分比，将其隐藏在"拖动

停止"（释放时），在其容器的左边框或右边框上绑定"可拖动div"，始终基于"左边框"位置......

我不知道为什么，但是在我的演示中，"draggable-div"始终在容器的左侧绑定自己，如果百分比为>50%，并且百分比在鼠标悬停时显示，如果我使用"显示：无;"，发布后也是如此。

多亏了你

我不知道

为什么jQuery不把它动画化到右边。 但是您可以通过按此量向左添加动画来模拟行为：

$('body').width() - $(this).width() - 8

数字 8 表示 8px 边框。

鼠标悬停时百分比重新出现的原因是由于以下代码：

$(this).on("mousemove", function () {
  ...
  $("#border_left_position_percentage").css({
     ...
     "display": "block"
  });

即使它是在 dragstart 事件中定义的，它也会附加到元素，因此每当鼠标移到元素上时，它总是被触发。

在我的代码中，我已将mousemove事件移到dragstart事件之外，并且不更改显示 CSS：

$('.right').on('mousemove', function() {
  var percentuale = parseInt((($(this).position().left / $(this).parent().width()) * 100), 10);
  $("#border_left_position_percentage").html(percentuale + "%");
});

我还将mousemove事件的逻辑/CSS移动到dragstop事件。

dragstart事件现在很简单：

$('#border_left_position_percentage').css('display','block');
$(this).stop();

这将显示元素，然后在拖动时由于mousemove事件而更新该元素。 它还可以停止任何正在进行的动画，因此您可以在盒子移动时抓住它。

小提琴

而不是：

"left": $('body').width() - $(this).width() - 8,

可以使用：

'left': $('body').width() - $(this).outerWidth(true),

"true"表示还包括水平边距（资源）。

JSFiddle

相关文章：