-2

画面の右側に div を作成しました。まず aa href があります。このボタンでこの div をドラッグして開くことができます。以下に例を示します。画面の右側に「Wat is een delicous Tasting」ボタンが表示されます。ドラッグして開くことができます。

しかし、私はこれに問題があります。これは問題です：

  • 最大の問題。divをドラッグすると開きます。そして、divをドラッグして戻します。div を画面外にドラッグできます。しかし、それは良くありません。divを閉じたとき。画面の外にドラッグすることはできません。
  • オーバーレイをフェードインするにはどうすればよいですか。オーバーレイは滑らかでなければなりません。今はきれいではありません。
  • ボックスでバウンス効果を作成するにはどうすればよいですか?

私はJavaScript初心者です。これで私を助けてくれることを願っています!! 助けてくれてありがとう！

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/

そこにはたくさんのデモがあり、そのうちの1つがあなたを整理するはずです.

于 2011-10-24T20:57:33.787 に答える