Перетащите div из коробки. - PullRequest
Новая
       17

Перетащите div из коробки.

0 голосов
/ 25 октября 2011

У меня есть div в правой части экрана.Сначала у вас есть HREF.Вы можете перетащить этот div с помощью этой кнопки.Вот пример: Здесь Прямо на экране вы видите кнопку «Wat is een delicous tasting».Вы можете перетащить его в открытую.

Но у меня есть проблемы с этим.Это проблемы:

  • Самая большая проблема.Когда вы перетащите div открыть.И чем ты тянешь div обратно.Вы можете перетащить div за пределы экрана.Но это не хорошо.Когда вы закрыли div.Вы не можете перетащить его за пределы экрана.
  • Как мне наложить наложение.Наложение должно быть гладким.Теперь это не красиво.
  • Как сделать эффект отскока в коробке.

Я начинающий javascripter.Я надеюсь, что вы можете помочь мне с этим!Спасибо за помощь!

Вы можете изменить код на jsFiddle: jsfiddle

Ответы [ 2 ]

0 голосов
/ 25 октября 2011

Ну, похоже, вы пытаетесь эмулировать перетаскивание, а не используете плагин, разработанный для этой цели.Попробуйте это:

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

Там есть куча демоверсий, одна из которых должна вам разобраться.

0 голосов
/ 25 октября 2011

Добавьте тест условия, чтобы проверить, превышает ли положение мыши определенную границу или нет.Если мышь превышает установленный предел (window width - element's width), не меняйте атрибут right маркера.

Fiddle: 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));
        }
    });
});
...