Question

我试图拖动div，在拖动过程中更改其样式：如果被拖动的div有一个＆＃34; border-left＆＃34;位置＆lt;它的容器宽度的50％，然后只有＆＃34; border-left＆＃34;是8px;否则（如果拖动的div具有＆＃34; border-left＆＃34;其位置>其容器宽度的50％）仅＆＃34; border-right＆＃34;是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");
            });
        }
    });
});

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

我不知道为什么，但在我的演示中，＆＃34; draggable-div＆＃34;如果百分比> 50％，并且在鼠标悬停时显示百分比，也是如果我在发布后使用＆＃34; display：none;＆＃34;，那么它总是绑定在容器的左侧。

谢谢你

Answer 1

我不知道为什么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

Answer 2

而不是：

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

可以使用：

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

＆＃34;的真＆＃34;还包括水平边距（resource）。

JSFiddle

基于其位置的Draggable-DIV样式

2 个答案:

Fiddle