基于位置的 Draggable-DIV 样式

Question

我正在尝试拖动一个 div，在拖动过程中更改其样式： 如果拖动的 div 有一个位置 其容器宽度的 50% 的“border-left”）只有“border-right”是 8px。这是demo。

HTML 代码：

<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");
            });
        }
    });
});

我只想在拖动过程中显示“border-left”位置的百分比，将其隐藏在“dragstop”（释放时）上，将“draggable-div”绑定在其容器的左边框或右边框上，始终基于“左边框”位置...

我不知道为什么，但是在我的演示中，“draggable-div”总是将自身绑定在容器的左侧，如果百分比大于 50%，并且鼠标悬停时也会显示百分比，如果我使用"display: none;"，发布后。

谢谢你

Answer 1

代替：

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

可以使用：

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

"true" 还包括水平边距 (resource)。

JSFiddle

Answer 2

我不知道为什么 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 事件而在拖动时更新。它还会停止任何正在进行的动画，因此您可以在盒子移动时抓住它。

Fiddle