3

我有两个不同的函数绑定到一个元素和事件，基本上它们被称为“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();

这里是我目前所在位置的 jsfiddle。

更新

$('.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”事件在每个元素中发生的位置以及@Jeremy C 提供各种优化的想法。

js在这里摆弄

4

1 回答 1

2

你根本不需要计时器。这至少适用于 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 'resize: vertical' 限制纵横比，但它看起来有点跳跃。为了让它变得非常流畅，我会说在每个 div 的右下角创建自己的调整大小命中区域，向其添加一个 png 以模仿浏览器调整大小的句柄，然后在拖动功能上创建自己的调整大小，而不是使用 css 调整大小。

于 2012-10-23T04:24:11.547 回答