Question

我在画布上有一个选择，我可以在那里拖动和调整大小。
当我在空白画布上拖动时，我也可以看到它。

但是如何让它可见并立即在我的手中设置bottom-right角落（用于调整大小）;即我可以将画布中的拖动事件传递给选择中的调整大小事件吗？有没有jQuery的方法或我必须自己做？

<div id="canvas" style="position:relative;width:500px;height:500px"
        draggable="true" onDragStart="initSelection(event)">
    <div id="selection" style="border:1px dashed gray;position:absolute;display:none"></div>
</div>

$('#selection').draggable({containment:'parent'}).resizable({containment:'parent'});

function initSelection(e){
    if ('none'==$('#selection').css('display'))
    {
        var q=$('#canvas').offset();
        $('#selection')
            .css('left', e.clientX-q.left)
            .css('top', e.clientY-q.top)
            .css('width',10).css('height',10)
            .css('display','block')
        ;
    }
}

Answer 1

我想我知道你要做什么。

在此测试：jsfiddle.net/Twisty/vkLjn0gL

我认为你需要采取一种或另一种方式，而不是同时采取这两种方式。

根据mousedown / mouseup事件用CSS调整div的大小鼠标x和y。
使其可以预先调整大小并启用/启动调整大小事件绑定到mousemove直到完成然后使其可拖动

当你发布答案时，我得到了这个答案：https://jsfiddle.net/Twisty/vkLjn0gL/5/

$(function() {
  $("#canvas").on("dragstart", initSelection);
  $("#canvas").on("mousemove", resize);
  $("#canvas").on("mouseup", function() {
    allowResize = false;
  });
  var allowResize = false;
  /*
  $('#selection').draggable({
    containment: 'parent'
  }).resizable({
    containment: 'parent'
  });
  */

  function initSelection(e) {
    if ('none' == $('#selection').css('display')) {
      var q = $('#canvas').offset();
      $('#selection')
        .css('left', e.clientX - q.left)
        .css('top', e.clientY - q.top)
        .css('width', '10px').css('height', '10px')
        .css('display', 'block');
      allowResize = true;
    }
  }

  function resize(e) {
    if (allowResize) {
      //console.log("MouseMove: ", e);
      var w = $("#selection").width(),
        h = $("#selection").height(),
        q = $("#canvas").offset(),
        px = 0,
        py = 0;
      px = e.clientX - q.left;
      py = e.clientY - q.top;
      console.log("Width: ", (w + px), " Height: ", (h + py));
      $("#selection").css({
        width: (w + px) + "px",
        height: (h + py) + "px"
      });
    }
  }
});

更新1

几乎没有修复鼠标跟踪：

https://jsfiddle.net/Twisty/vkLjn0gL/6/

function resize(e) {
    if (allowResize) {
      //console.log("MouseMove: ", e);
      $("#canRes").html(allowResize);
      $("#cx").html(e.clientX - $("#canvas").offset().left);
      $("#cy").html(e.clientY - $("#canvas").offset().top);
      $("#ox").html($("#selection").width());
      $("#oy").html($("#selection").height());
      var w = $("#selection").width(),
        h = $("#selection").height(),
        q = $("#canvas").offset(),
        o = $("#selection").position();
        px = 0,
        py = 0;
      if (w > $("#canvas").width() + q.left) {
        return false;
      }
      if (h > $("#canvas").height() + q.top) {
        return false;
      }
      px = e.clientX - q.left - o.left;
      py = e.clientY - q.top - o.top;
      $("#selection").css({
        width: px + "px",
        height: py + "px"
      });
    }
  }

更新2

我认为，如果您仍在寻找，我会做您想要的所有事情：https://jsfiddle.net/Twisty/vkLjn0gL/7/

更新为mouseup

之后的选择

  $("#canvas").on("mouseup", function() {
    allowResize = false;
    $("#canRes").html(allowResize);
    $("#selection").draggable({
        containment: 'parent'
      })
      .resizable({
        containment: 'parent'
      });
  });

更新3

在初始尺寸调整时添加了拖动手柄：https://jsfiddle.net/Twisty/vkLjn0gL/10/

将div拖入存在

1 个答案: