Question

我有两个不同的函数绑定到一个元素和事件，基本上它们被称为'mousedown'。

我正试图找出一种方法来允许我的元素'调整大小'或'移动/拖动'但不能同时进行两种操作。

现在我正在使用一个'setTimeout'函数，该函数在调用'resize'函数时被清除，通过这样做我取消了我的'move / drag'函数。它起作用但根本不太好。

我需要帮助找出更好的方法。我感谢任何建议。

var timer= "",
    resize_select = false;

$('element').resize(function() {
    resize_select = true;
    //do stuff, called every resize, just like resizing <textarea> 
    window.clearTimeout(timer);
});

$('element').on("mousedown", function() {
    $(this) = $this;
    resize_select = false;

    if (resize_select === false) {
        timer = setTimeout(function() {
            $this.addClass('dragable');
        }, 500);
    }

    $(document).on("mousemove", function(e) {
        $('.dragable').css({
            top: e.pageY,
            left: e.pageX
        });
    });
});

$(document).on('mouseup', function() {
    resize_select = false;
    $('.resize').removeClass('dragable');
});

我正在使用Ben Alman的'jQuery resize事件'来允许任何元素绑定到.resize（）;

HERE 是我目前所在的地方。

已更新

$('.resize').css({
    resize:'both',
    overflow:'hidden'
});

$('.resize').on('mousedown', function(event) {
    var $this = $(this),
        $this_height = $this.height(),
        $this_width = $this.width(),
        x = event.pageX - $this.offset().left,
        y = event.pageY - $this.offset().top,
        xx = $this_width - 10,
        yy = $this_height - 10,
        img_num = $(this).index();

    event.preventDefault();

    if (xx - x > 0 || yy - y > 0) {
        $(document).mousemove(function(pos) {
            var thisX = pos.pageX - $this_width / 2,
                thisY = pos.pageY - $this_height / 2;

            $this.offset({
                left: thisX,
                top: thisY
            })
        });
    }

    if (xx - x < 0 && yy - y < 0) {
        $(document).mousemove(function(pos) {
            var thisX = pos.pageX - $this.offset().left,
                thisY = pos.pageY - $this.offset().top,
                ratio = ((thisX + thisY) / 2) / (($this_height + $this_width) / 2),
                height_new = $this_height * ratio,
                width_new = $this_width * ratio;

            $this.css({
                'width': width_new,
                'height': height_new
            });
        });
    }
});

$(document).on('mouseup', function() {
    $(document).unbind('mousemove');
});

这可以归功于@jfriend00的想法，即找出每个元素中“mousedown”事件发生的位置＆amp; @Jeremy C提供各种优化。

js fiddle here HERE

Answer 1

根本不需要计时器。这至少适用于Chrome，我会在所有浏览器中测试是否安全。你走了：

var img_amount = $('.resize').length,
    height_org = new Array(),
    width_org = new Array(),
    resize_select = false,
    timer = "";

for (var i = 0; i < img_amount; i++) {
    height_org[i] = $('.resize:eq(' + i + ')').height();
    width_org[i] = $('.resize:eq(' + i + ')').width();
}

//set div width to div height * ratio to preserve aspect ratio
$('.resize').resize(function(event){
    var img_num = $(this).index(),
        height_new = $(this).height(),
        ratio = height_new / height_org[img_num],
        width_new = width_org[img_num] * ratio;

    $(this).css('width', width_new);
});

$('.resize').on('mousedown', function(event) {
    //prevent typical browser behaviour of dragging the div as an image
    event.preventDefault();

    //set z-index so the div you are dragging is in front
    $('.resize').css('z-index', 1);
    $(this).css('z-index', 2);

    $(this).mousemove(setPos);
});

$('.resize').on('mouseup', function() {
    $(this).unbind('mousemove', setPos);
});

function setPos(event) {
    var thisX = event.pageX - $(this).width() / 2;
    var thisY = event.pageY - $(this).height() / 2;
    $(this).offset({
        left: thisX,
        top: thisY
    });
}

编辑：我添加了调整大小功能来限制宽高比与css'调整大小：垂直'，但它看起来有点跳跃。为了使它非常流畅，我想在每个div的右下角创建你自己的调整大小命中区域，为它添加一个png以模仿浏览器调整大小句柄，然后在拖动函数上创建你自己的调整大小，而不是使用css resize。 / p>

jQuery - 将多个函数绑定到一个事件但区分函数的执行

1 个答案: