Question

我在屏幕右边做了一个div。首先你有一个href。您可以使用此按钮拖动此div。以下是一个示例：Here在屏幕右侧，您会看到“Wat is een delicous tasting”按钮。你可以把它拖开。

但我对此有疑问。这是问题所在：

最大的问题。当你拖动div打开。而不是你拖回div。您可以在屏幕外拖动div。但是并不好。当你关闭div。你无法将其拖出屏幕。
我如何淡化叠加层。叠加层必须平滑。现在它不漂亮。
如何在包装盒中制作反弹效果。

我是javascripter的开始。我希望你能帮助我！谢谢你的帮助！

您可以更改jsFiddle上的代码：jsfiddle

Answer 1

添加条件测试以检查鼠标位置是否超过某个边界。如果鼠标超过了固定限制（window width - element's width），请勿更改标记的right属性。

$(function () {
    "use strict";
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a"),
        mouseDown = false,
        grabbed   = 0,
        start     = -303,
        maxLeftOffset = $(window).width() - 75;
        // ^^^ Limit to 75px from the right (= marker's width)
    button.mousedown(function (e) {
        mouseDown = true;
        $('*').bind('selectstart', false);
        grabbed = e.pageX;
        button.css({ cursor: "-moz-grabbing"});
        $("body").append('<div class="background-overlay"></div>');
    });
    $('body').mouseup(function () {
        mouseDown = false;
        $('*').unbind('selectstart', false);
        button.css({ cursor: "-moz-grab"});
        $(".background-overlay").remove();
        start = parseInt(box.css('right'), 10);
    }).mousemove(function (e) {
        if (mouseDown) {
            if(e.pageX > maxLeftOffset) return; //<---- Don't go past an edge
            //button.addClass("open");
            box.css("right", Math.min(grabbed - e.pageX + start, 0));
        }
    });
});

Answer 2

好吧，看起来你试图模仿拖动而不是使用为此目的设计的插件。试试这个：

http://jqueryui.com/demos/draggable/

那里有很多演示，其中一个应该排除你。

将div拖出框。

2 个答案: