-2

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

但我有这个问题。这是问题：

  • 最大的问题。当你拖动 div 打开时。然后将 div 拖回来。您可以将 div 拖到屏幕外。但并不好。当你关闭 div. 您不能将其拖出屏幕。
  • 我怎样才能淡入叠加层。覆盖层必须光滑。现在不漂亮了。
  • 我怎样才能在盒子里制作弹跳效果。

我是一个初学者。我希望你能帮我解决这个问题！！感谢您的帮助！

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

4

2 回答 2

0

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

小提琴：http: //jsfiddle.net/ErWjr/1/

$(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));
        }
    });
});
于 2011-10-24T20:57:21.327 回答
0

好吧，看起来您正在尝试模拟拖动而不是使用为此目的而设计的插件。试试这个：

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

那里有很多演示，其中一个应该可以解决您的问题。

于 2011-10-24T20:57:33.787 回答