माउस चाल के साथ घुमावदार div

Question

मेरे पास एक div घुमाने के लिए निम्न कोड है। उसी div के ऊपरी दाएं कोने में छवि पर mousedown घटना द्वारा। मैं div को माउस तक घुमाने के लिए चाहता हूँ। तर्कसंगत रूप से मेरा मानना ​​है कि कोड ठीक है लेकिन यह एक क्लिक के बाद काम करता है। जब मैं किसी अन्य आइटम पर क्लिक करता हूं तो माउसअप के बजाय रोटेशन रुक जाता है। मैं के बाद ब्राउज़र नीचे माउस छवि को खींचें करने की कोशिश करता खींचने पर लगता है, लेकिन मैं मदद की जरूरत है .. अग्रिम :) धन्यवाद

fl_rotate: false, 
rotdivs: function() { 
    var pw; 
    var oThis = this; 
    $('.drop div img').mousedown(function(e) { 
     oThis.destroyDragResize(); 
     oThis.fl_rotate = true; 
     return; 
    }); 
    $(document).mousemove(function(e) { 
     if (oThis.fl_rotate) { 
      var element = $(oThis.sDiv); 
      oThis.rotateOnMouse(e, element); 
     } 
    }); 
    $(document).mouseup(function(e) { 
     if (oThis.fl_rotate) { 
      oThis.initDragResize(); 
      var ele = $(oThis.sDiv); 
      ele.unbind('mousemove'); 
      ele.draggable({ 
       containment: 'parent' 
      }); 
      ele = 0; 
      oThis.fl_rotate = false; 
     } 
    }); 
}, 
rotateOnMouse: function(e, pw) { 
    var offset = pw.offset(); 
    var center_x = (offset.left) + ($(pw).width()/2); 
    var center_y = (offset.top) + ($(pw).height()/2); 
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY; 
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
    var degree = (radians * (180/Math.PI) * -1) + 100; 
    //   window.console.log("de="+degree+","+radians); 
    $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
}​ 

Answer 1

मुझे लगता है कि समस्या यह थी कि यदि स्थानीय खींचें ईवेंट (जिसमें चित्र खींच ली) था निकाल दिया गया (माउस नीचे) यह माउस अप घटना को निकाल दिया गया था। तो आपको बस माउस डाउन इवेंट की डिफ़ॉल्ट कार्रवाई को रोकने की आवश्यकता है।

यहाँ

आप एक काम उदाहरण है:

HTML:

<div class="drop"> 
    <div> 
     <img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/> 
    </div> 
</div>​ 

जावास्क्रिप्ट:

$(document).ready(function() { 
    // the same as yours. 
    function rotateOnMouse(e, pw) { 
     var offset = pw.offset(); 
     var center_x = (offset.left) + ($(pw).width()/2); 
     var center_y = (offset.top) + ($(pw).height()/2); 
     var mouse_x = e.pageX; 
     var mouse_y = e.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 100; 
     //   window.console.log("de="+degree+","+radians); 
     $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
    } 

    $('.drop div img').mousedown(function(e) { 
    e.preventDefault(); // prevents the dragging of the image. 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('.drop div img')); 
    }); 
    }); 

    $(document).mouseup(function(e) { 
    $(document).unbind('mousemove.rotateImg'); 
    }); 
}); 

डेमो: http://jsfiddle.net/rwBku/13/

मैं jQuery के namespaced events का इस्तेमाल किया है ताकि आप केवल निकल सकते हैं मूसोम घटना जो आप चाहते हैं।

कृपया ध्यान दें कि छवि का घूर्णन छोटी है, लेकिन मैंने वास्तव में उस विधि को नहीं देखा।

Answer 2

मैं इस ढेर अतिप्रवाह सवाल आपके सवाल का How to get mouseup to fire once mousemove complete

चाल "ecapsulate" MouseMove और mousedown घटना में घटनाओं mouseup है उत्तर देता है लगता है।

Answer 3

इसके लिए एक lib है। स्टैंडअलोन या jQuery प्लगइन के रूप में काम करता है https://github.com/PixelsCommander/Propeller