2

ここでこの問題の配列を見て、修正として実装しようとしましたが、修正されていないようです。

ここにフィドルのセットアップがありますhttp://jsfiddle.net/OwenMelbz/RjYnM/

問題は、ボックスをドラッグしたら、mouseup イベントが登録される前にクリックする必要があることです。

これがjsです（申し訳ありませんがたくさんあります）

$(function() {
var pageID = document.location.pathname;
var defaultMarkup = document.documentElement.innerHTML;

$('.feedback-menu').attr('data-pageId', pageID);

$('.feedback-tab').click(function() {
    var state = $(this).attr('data-state');

    if (state == "closed") {
        $(this).attr('data-state', 'open');
        $('.feedback-menu').animate({
            'right': '-1px'
        });
        $('.feedback-tab').animate({
            'right': '100px'
        });
    }
    else {
        $(this).attr('data-state', 'closed');
        $('.feedback-menu').animate({
            'right': '-102px'
        });
        $('.feedback-tab').animate({
            'right': '-1px'
        });
    }
});

$('body').append("<div class='feedback-overlay' style='display:none;'></div>");

$('.feedback-btn').live('click', function() {
    setupCanvas();
});

var setupCanvas = function() {
    var overlayMarkup = "<div class='feedback-overlay'></div>";
    var docHeight = $(document).outerHeight();
    var docWidth = $(document).outerWidth();


    $('.feedback-overlay').css({
        'width': docWidth,
        'height': docHeight,
        'display': 'block'
    });

};

var startDrawing = function() {
    initDraw();
};

window.bugID = 0;
window.canvas = $('.feedback-overlay');

canvas.live('mousedown', function(e) {

    if(e.target != this){ return true; }

    bugID++;

    window.click_y = e.pageY;
    window.click_x = e.pageX;


    canvas.append('<div class="selection-box" id="bugID-' + bugID + '"></div>');

    window.bugBox = $('#bugID-' + bugID);

    bugBox.css({
        'top': click_y,
        'left': click_x,
        'width': 0,
        'height': 0
    });

    canvas.mousemove(function(e) {

        var move_x = e.pageX,
            move_y = e.pageY,
            width = Math.abs(move_x - click_x)-10,
            height = Math.abs(move_y - click_y)-10;

        bugBox.css({
            'width': width,
            'height': height
        });
        if (move_x < click_x) { //mouse moving left instead of right
            bugBox.css({
                'left': click_x - width
            });
        }
        if (move_y < click_y) { //mouse moving up instead of down
            bugBox.css({
                'top': click_y - height
            });
        }
        return false;
    });

    canvas.one('mouseup', function(e) {

        bugBox.draggable().resizable();
        if (bugBox.width() < 50 || bugBox.height() < 50) {
            bugBox.remove();
        }
        $().unbind();
        });

        return false;
});

}); </p>

4

1 に答える 1

1

$(this).unbind();マウスアップメソッドで使用してみてください：

canvas.one('mouseup', function(e) {
    console.log("a");
    bugBox.draggable().resizable();
    if (bugBox.width() < 50 || bugBox.height() < 50) {
        bugBox.remove();
    }
    $(this).unbind();
    });

更新されたフィドル: http://jsfiddle.net/johnkoer/RjYnM/5/

PS: Live は非推奨なので、 on の使用に移行する必要があります

于 2012-09-27T21:55:53.787 に答える