Question

我正在尝试使用jQuery创建一个鼠标选择，这是我正在尝试的，它有效，但有一个错误：如果我开始选择并将鼠标移动到圆圈，选择中断...我怎么能解决它？

distanceStart = 0;
distanceEnd = 0;
mousedown = false;

$(window).on('mousedown',function(e){
    e.preventDefault();
    mousedown = true;
    distanceXStart = e.clientX;
    distanceYStart = e.clientY;
    $div = $('<div/>', {
        class: 'class'
    }).appendTo('body');
});

$(window).on('mouseup',function(e){
    e.preventDefault();
    mousedown = false;
    $div.remove();
});

$(window).on('mousemove',function(e){
    e.preventDefault();
    if(mousedown){
        distanceXEnd = e.clientX;
        distanceYEnd = e.clientY;
        distanceX = (distanceXEnd - distanceXStart);
        distanceY = (distanceYEnd - distanceYStart);
        if(distanceX > 0 && distanceY > 0){
            $div.css({
                'left': (e.clientX - (distanceX/*/2*/)),
                'top': (e.clientY - (distanceY/*/2*/)),
                'width': distanceX,
                'height': distanceY
            });
        }else
        if(distanceX < 0 && distanceY < 0){
            $div.css({
                'left': e.clientX,
                'top': e.clientY,
                'width': (1-distanceX),
                'height': (1-distanceY)
            });
        }
    }
});

Answer 1

你几乎就在那里，你忘了要检查的其他两个条件：UITableView *tableView = [[UITableView alloc]init]; UIView *headerView = [UIView new]; id delegateProtocolMock = OCMProtocolMock(@protocol(UITableViewDelegate)); tableView.delegate=delegateProtocolMock; OCMStub([delegateProtocolMock tableView:tableView viewForHeaderInSection:0]).andReturn(headerView);或distanceX < 0

<强> Here's a demo using your original fiddle

这是我在第二个distanceY < 0结束后添加的内容：

else if

Answer 2

您可以使用HTML5 canvas完成此类交互。 https://jsfiddle.net/nbwLr27s/1/

Canvas很适合这类事情，因为它可以让你完全控制你想要展示的形状并且表现得非常好，因为不涉及DOM操作。

使用画布fillRect，您只需要开始x，开始y，宽度和高度。我使用了以下代码：

  var leftmost = Math.min(start_x, coords.x)
  var rightmost = Math.max(start_x, coords.x)
  var lowest = Math.min(start_y, coords.y)
  var highest = Math.max(start_y, coords.y)
  ctx.fillRect(leftmost, lowest, rightmost - leftmost, highest - lowest)

jquery鼠标选择不正常

2 个答案: