jQuery ड्रैग और ड्रा

Question

मैं एक jQuery प्लगइन बनाने की कोशिश कर रहा हूं जो आपको एक आयत खींचने और खींचने की अनुमति देता है (या सीमा के साथ एक div) लेकिन मुझे यकीन नहीं है कि यह कैसे करें। मुझे इस बात की कोई जानकारी नहीं है कि वर्तमान में यह क्षमता है इसलिए मुझे नहीं पता कि यह कैसे करना है इसके उदाहरण के लिए कहां देखना है।

मैं jQuery में ड्रैग और ड्रा को कैसे कार्यान्वित कर सकता हूं?

Answer 1

कुछ इस तरह के लिए मूल बातें, काफी सरल हैं जब आप इसके बारे में सोचते:

• कुछ कंटेनर पर mousedown घटनाओं (संभव पूरे दस्तावेज) के लिए सुनो;
  • event ऑब्जेक्ट (e.pageX और e.pageY) से माउस निर्देशांक का उपयोग करके माउस की स्थिति पर एक बिल्कुल स्थित तत्व रखें।
  • और height ऑब्जेक्ट (माउस निर्देशांक के आधार पर) को बदलने के लिए mousemove ईवेंट सुनना प्रारंभ करें;
• mousemove ईवेंट श्रोता को अलग करने के लिए mouseup ईवेंट के लिए सुनो।

ऊपर उल्लिखित निरपेक्ष रखा तत्व जैसे, एक सीमा और background: transparent के साथ एक <div>।

अद्यतन: यहाँ एक उदाहरण है:

$(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(); 
     }); 
    }); 
}); 

डेमो: http://jsbin.com/ireqix/226/