如何在jquery

Question

我正在使用鼠标绘制线条，它正在使用mouseup和mousedown事件，但我想用mousemove事件绘制线条，任何人都可以帮我画画与mousemove事件对应，我只想用jquery做，我不想添加任何其他js和canvas我只想用jquery做这个。

这是我的代码。

var coordinate = [];
$("div").mousedown(function(event) {
  var parentOffset = $(this).parent().offset();
  var relX = event.pageX - parentOffset.left;
  var relY = event.pageY - parentOffset.top;
  var temp_array = [];
  temp_array['X'] = (event.pageX - $(this).offset().left);
  temp_array['Y'] = event.pageY - $(this).offset().top;
  coordinate.push(temp_array);
});

$("div").mouseup(function(event) {
  var parentOffset = $(this).parent().offset();
  var relX = event.pageX - parentOffset.left;
  var relY = event.pageY - parentOffset.top;
  var temp_array = [];
  temp_array['X'] = (event.pageX - $(this).offset().left);
  temp_array['Y'] = event.pageY - $(this).offset().top;
  coordinate.push(temp_array);
  drawLine();
});

function drawLine() {
  console.log(coordinate);
  if (coordinate.length > 1) {
    var start_x = coordinate[0]['X'];
    var start_y = coordinate[0]['Y'];
    var end_x = coordinate[1]['X'];
    var end_y = coordinate[1]['Y'];
    var x_diff = Math.abs(parseInt(end_x) - parseInt(start_x));
    var y_diff = Math.abs(parseInt(end_y) - parseInt(start_y));
    console.log(x_diff + ' - ' + y_diff);
    if (x_diff > y_diff) {
      if (start_x < end_x) {
        var width = parseInt(end_x) - parseInt(start_x);
        $("div").html("<div class='line' />");
        $("div .line").css("margin-left", start_x + "px");
        $("div .line").css("margin-top", end_y + "px");
        $("div .line").css("width", width + "px");
        $("div .line").css("border", "1px solid black");
        $("div .line").css("height", "0px");
      } else if (start_x > end_x) {
        var width = parseInt(start_x) - parseInt(end_x);
        $("div").html("<div class='line'/>");
        $("div .line").css("margin-left", end_x + "px");
        $("div .line").css("margin-top", end_y + "px");
        $("div .line").css("width", width + "px");
        $("div .line").css("border", "1px solid black");
        $("div .line").css("height", "0px");
      }
    } else {
      if (start_y < end_y) {
        var height = parseInt(end_y) - parseInt(start_y);
        $("div").html("<div class='line'>");
        $("div .line").css("margin-top", start_y + "px");
        $("div .line").css("margin-left", start_x + "px");
        $("div .line").css("height", height + "px");
        $("div .line").css("width", "0px");
        $("div .line").css("border", "1px solid black");
      } else if (start_y > end_y) {
        var height = parseInt(start_y) - parseInt(end_y);
        $("div").html("<div class='line'>");
        $("div .line").css("margin-top", end_y + "px");
        $("div .line").css("margin-left", start_x + "px");
        $("div .line").css("height", height + "px");
        $("div .line").css("width", "0px");
        $("div .line").css("border", "1px solid black");
      }
    }
    coordinate = [];
  }
}

$("div").mousemove(function(event) {

});

 .center-div {
      width: 80%;
      height: 80%;
      background: grey;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    
    p {
      margin: 0;
      margin-left: 10px;
      color: red;
      width: 220px;
      height: 120px;
      padding-top: 70px;
      float: left;
      font-size: 14px;
    }
    
    span {
      display: block;
    }
    
    .line {
      height: 47px;
      border-bottom: 1px solid black;
      position: absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center-div"></div>