ब्राउज़र कर्सर के बाहर कस्टम कर्सर

Question

मेरे पास मेरी वेबसाइट पर एक तत्व है जो स्वतंत्र रूप से आकार बदलने योग्य है। यह किनारों पर 4 हैंडल द्वारा किया जाता है। इन हैंडल को घुमाने पर और तत्व का आकार बदलते समय मैं संबंधित आकार बदलने वाले तीरों को दिखाना चाहता हूं।

वर्तमान में मैंने इन तीरों के लिए शरीर/रूट की सीएसएस कर्सर शैली सेट करके इस व्यवहार को लागू किया। इसके बारे में समस्या ब्राउज़र विंडो के क्लाइंट क्षेत्र की सीमा है। यह दृश्यमान रूप से अधिक संगत और कम भ्रमित होगा, यदि माउस दबाए जाने पर तीर कर्सर हर जगह दिखाई देगा।

Google मानचित्र मानचित्र को स्थानांतरित करते समय अपने हाथ कर्सर के साथ एक ही काम कर रहा है। तो मेरा सवाल यह है कि इस प्रभाव को अपने आप कैसे प्राप्त करें।

मेरे वर्तमान (प्रासंगिक) स्रोत:

function startObjectScaling(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    document.documentElement.style.cursor = this.style.cursor; 
    window.addEventListener("mouseup", stopObjectScaling, false); 
} 

function stopObjectScaling(e){ 
    e.stopPropagation(); 
    document.documentElement.style.cursor = ''; 
    window.removeEventListener("mouseup", stopObjectScaling); 
} 

[...] 

var tg = document.getElementById("transformGadget"); 
var handle = tg.firstChild.nextSibling; 
for(var i=0;i<4;i++){ 
    handle.addEventListener("mousedown", startObjectScaling, false); 
    handle = handle.nextSibling; 
} 

Answer 1

इस उद्देश्य के लिए अधिक आधुनिक ब्राउज़र में एक विशेष कार्य लागू किया गया है। नाम setCapture() है। यह उस ऑब्जेक्ट पर सभी माउस इनपुट को रीडायरेक्ट करता है जिस पर विधि को कॉल किया गया था। अब एक साधारण सीएसएस कर्सर उस तत्व की परिभाषा वांछित प्रभाव संग्रहित करने के लिए पर्याप्त है। माउस रिलीज के बाद यह प्रभाव बंद हो जाता है (निश्चित रूप से सुरक्षा के लिए)। यह भी फोन करके मैन्युअल रूप से रोका जा सकता है releaseCapture

उदाहरण:

<style type="text/css"> 
#testObj { 
    /* this cursor will also stay outside the window. 
     could be set by the script at the mousedown event as well */ 
    cursor: hand; 
} 
</style> 

[...]

document.getElementById('testObj').onmousedown = function(e){ 

    // these 2 might be useful in this context as well 
    //e.stopPropagation(); 
    //e.preventDefault(); 

    // here is the magic 
    e.target.setCapture(); 
} 

Answer 2

अगर तीर कर्सर हर जगह दिखाई दे रहा होगा जबकि माउस दबाए रखें है।

आप अपना व्यवहार बनाने के लिए एक संभावित ओएस क्विर्क पर भरोसा कर रहे हैं। यह ऐसा कुछ नहीं है जिसे आप स्वीकार कर सकते हैं। हालांकि, एक बार जब आप एक मूसडाउन शुरू करते हैं, तो उस बिंदु पर कर्सर सामान्य रूप से वही रहेगा, इससे कोई फर्क नहीं पड़ता कि आप माउस को कहाँ ले जाते हैं, कुछ और (एक और विंडो जिसे आप माउस पर ले जा सकते हैं? डेस्कटॉप? सिस्टम-इंटरप्ट?) परिवर्तन कर्सर

दूसरे शब्दों में, इस व्यवहार पर भरोसा न करें। कुछ और ढूंढें जो आपके लिए काम करेगा। यदि आपको ऐसा करना है, तो अपनी व्यावसायिक आवश्यकताओं की पुन: जांच करें।