jQuery kéo và vẽ

Question

Tôi đang cố gắng xây dựng một plugin jQuery cho phép bạn kéo và vẽ hình chữ nhật (hoặc hình chữ nhật có viền) nhưng tôi không chắc chắn cách thực hiện. Tôi không biết bất kỳ ai hiện có khả năng này nên tôi không biết phải tìm một ví dụ về cách làm việc này.

Làm cách nào để triển khai kéo và vẽ trong jQuery?

Answer 1

Các vấn đề cơ bản cho một cái gì đó như thế này là khá đơn giản, khi bạn nghĩ về nó:

• Nghe mousedown sự kiện trên một số container (có thể toàn bộ tài liệu);
  • Đặt phần tử được định vị hoàn toàn ở vị trí của chuột, sử dụng tọa độ chuột từ đối tượng event (e.pageX và e.pageY);
  • Bắt đầu nghe mousemove sự kiện để thay đổi đối tượng width và height (dựa trên tọa độ chuột);
• Nghe sự kiện mouseup để tách người nghe sự kiện mousemove.

Yếu tố được đặt tuyệt đối nói trên là, ví dụ: <div> có đường viền và background: transparent.

Cập nhật: đây là một ví dụ:

$(function() { 
    var $container = $('#container'); 
    var $selection = $('<div>').addClass('selection-box'); 

    $container.on('mousedown', function(e) { 
     var click_y = e.pageY; 
     var click_x = e.pageX; 

     $selection.css({ 
      'top': click_y, 
      'left': click_x, 
      'width': 0, 
      'height': 0 
     }); 
     $selection.appendTo($container); 

     $container.on('mousemove', function(e) { 
      var move_x = e.pageX, 
       move_y = e.pageY, 
       width = Math.abs(move_x - click_x), 
       height = Math.abs(move_y - click_y), 
       new_x, new_y; 

      new_x = (move_x < click_x) ? (click_x - width) : click_x; 
      new_y = (move_y < click_y) ? (click_y - height) : click_y; 

      $selection.css({ 
       'width': width, 
       'height': height, 
       'top': new_y, 
       'left': new_x 
      }); 
     }).on('mouseup', function(e) { 
      $container.off('mousemove'); 
      $selection.remove(); 
     }); 
    }); 
}); 

Demo: http://jsbin.com/ireqix/226/