2012-04-11 11 views
8

मैं एक वेब एप्लिकेशन बना रहा हूं जिसमें वेब पेज के भीतर और अन्य अनुप्रयोगों जैसे शब्द और पीडीएफ दस्तावेज़ों से टेक्स्ट खींचने और छोड़ने का बहुत कुछ शामिल है। यदि माउस नीचे (क्लिक किया गया) या ऊपर (रिलीज़) है तो मुझे माउस की वर्तमान स्थिति प्राप्त करने की आवश्यकता है। वर्तमान में मैं माउस की वर्तमान स्थिति प्राप्त करने में सक्षम हूं यदि मैं वेब पेज के भीतर टेक्स्ट खींच रहा हूं लेकिन यदि माउस किसी अन्य एप्लिकेशन से आ रहा है तो माउस स्थिति प्राप्त करने में सक्षम नहीं है, शब्द और इसके कुछ पाठ खींचते हैं। माउस के नीचे या ऊपर राज्य पाने के लिए कोई संकेतक वास्तव में सराहना की जाती है। Codeजावास्क्रिप्ट या jquery i.e wheather में माउस की वर्तमान स्थिति का पता लगाने के लिए नीचे या ऊपर

var _isMouseDown = false; 

$(document).on("mousedown", function(event) { 
    _isMouseDown = true; 
}); 
$(document).on("mouseup", function(event) { 
    _isMouseDown = false; 
}); 

तो फिर तुम जाँच कर सकते हैं _isMouseDown अगर माउस को देखने के लिए - Demo:

+0

बाहरी सामग्री से खींचें और छोड़ें, ऐसा लगता है कि पृष्ठ केवल डीआरओपी के बाद सक्रिय हो जाता है। –

उत्तर

3

विस्तृत जानकारी है मुद्दे के रूप में मैं समझता हूँ कि यह है कि आप निर्धारित करने के लिए अगर यह (एक खींच ऑपरेशन के लिए विंडो के बाहर दबाया गया था बाईं माउस बटन दबाया जाता है कि क्या जरूरत है)।

मुद्दों की एक संख्या हैं:

  • कोई MouseMove एक खींच आपरेशन के दौरान वर्तमान बटन राज्यों के
  • डेटा निकाल दिया घटनाओं देखते हैं ब्राउज़रों

मैं इस के साथ आए हैं के बीच अलग समाधान:

/** 
* keeps track of the current active mouse button. 
* @param notifier {Function} called when the active button is updated. 
* @param oneCallPerStateChange {Boolean} (defaults to false) if true the notifier will be called only when the active button changes. 
*/ 
function initActiveButtonWatcher(notifier, oneCallPerStateChange) { 

    // create variable to store button states. 
    var _activeButton = -1, activeButton = 0 

    // function to set the current active button. 
    function updateMouseState(e) { 

     // update active button. 
     activeButton = typeof e.buttons === "number" ? e.buttons : e.which 

     // notify if the active button is different. 
     if (oneCallPerStateChange? (_activeButton !== activeButton && typeof notifier === "function") : (typeof notifier === "function")) { 
      notifier(activeButton) 
     } 

     // store the last state in order to be able to tell if the state has changed. 
     _activeButton = activeButton 
    } 

    // function to get the current active button. 
    function getButtonState() { return activeButton } 

    // update the button state when the mouse is moved 
    // or an item is dragged into the window. 
    window.addEventListener("mousemove", updateMouseState, false) 
    window.addEventListener("dragover", function() { updateMouseState({which: 1}) }, false) 
    window.addEventListener("dragleave", function() { updateMouseState({which: 0}) }, false) 

    // expose the getter on the global object. 
    window.getButtonState = getButtonState 
} 

उपर्युक्त समाधान से जुड़ा हुआ है mousemove घटना, और ड्रैगओवर घटना। क्रोम ड्रैगओवर ईवेंट में सही बटन मानों के साथ एक वैध ईवेंट ऑब्जेक्ट प्राप्त करता है, हालांकि मुझे पता चला कि फ़ायरफ़ॉक्स नहीं था। मुझे लगता है कि बाएं माउस बटन की स्थिति ड्रैग ऑपरेशन के दौरान बहुत स्पष्ट है, यह दबाया जा रहा है, है ना? आप क्लिक करके और आगे बढ़ने के बिना खींच नहीं सकते हैं। तो मैं सिर्फ ड्रैगओवर पर राज्य को 1 (बाएं नीचे) सेट करता हूं।इसी तरह, ड्रैगलेव पर, मान शून्य पर सेट होता है।

आप डिफ़ॉल्ट ब्राउज़र क्रियाओं को रोकने के लिए सामान्य ड्रैगओवर, ड्रैगस्टार्ट, एंड, ड्रॉप, आदि हैंडलिंग करेंगे और window.getButtonState() द्वारा दिए गए मान को हमेशा सक्रिय माउस बटन का मान होना चाहिए।

;(function() { 

    var active = document.getElementsByTagName("h1")[0] 

    function translate(n) { 
     switch (n) { 

      case 0: 
       return "none" 
       break; 
      case 1: 
       return "left" 
       break; 
      case 2: case 4: // Firefox calls it 4, the values differ between browsers I find. 
       return "middle" 
       break; 
      case 3: 
       return "right" 
     } 
    } 

    initActiveButtonWatcher(
     function(currentActive) { 
      active.innerHTML = "Active button: " + translate(currentActive) 
     } 
    ) 

})() 

आप विभिन्न मूल्यों से निपटने के लिए कुछ फेरबदल पार ब्राउज़रों करना होगा (एफएफ:

यहां कुछ उदाहरण उपयोग है कि वर्तमान में दबाया बटन को पेज में पहली H1 टैग का मान सेट है मध्य बटन के लिए 4 की सूचना दी, आदि) लेकिन आप इस विधि के साथ वर्तमान बटन उचित रूप से अच्छी तरह से प्राप्त करने में सक्षम होना चाहिए।

इसे आजमाएं: http://jsfiddle.net/6BUA4/

0

राज्य के साथ एक चर है।

या अधिक कॉम्पैक्ट: Demo - Code

$(document).on("mousedown mouseup", function(event) { 
    _isMouseDown = event.type == "mousedown"; 
}); 

आप वैश्विक चर आप को बचा सकता _isMouseDown फेंक jQuery के data विधि नहीं करना चाहते हैं: - Code

$(document).on("mousedown mouseup", function(event) { 
    $(this).data("_isMouseDown", (event.type == "mousedown")); 
}); 

और फेंक जाँच Demo: $(document).data("_isMouseDown")


+1

उत्तर के लिए धन्यवाद, लेकिन यह काम नहीं करता है अगर माउस एक अलग अनुप्रयोग से आ रहा है तो पीडीएफ कहता है और इसके कुछ पाठ खींच रहा है। यही वह है जो मैं देख रहा हूं, क्षमा करें अगर मैं –

+1

प्रश्न में स्पष्ट नहीं था, ठीक है। यह वास्तव में एक अच्छा सवाल है :) – andlrc

0

आप नए मजबूत एचटीएमएल 5 खींचें के लिए देख रहे हैं और ड्रॉप http://www.w3schools.com/html/html5_draganddrop.asp

घटना आप "ड्रॉप" है के लिए

<div id="droppable" 
ondragover="event.preventDefault()" 
ondrop="event.preventDefault(); 
    console.log(event); 
    console.log(event.dataTransfer.getData('text/plain'))"> 

देख रहे हैं बेशक आप js फ़ाइल में इस कोड को आगे बढ़ना चाहिए, लेकिन यह आपको उदाहरण देता है कि क्या किया गया है। आप पढ़ सकते हैं कि बाहर की बूंद के अंदर क्या है, यहां तक ​​कि इसे अपलोड के लिए भी इस्तेमाल करें।

यहाँ के बारे में event.dataTransfer http://www.tutorialspoint.com/html5/html5_drag_drop.htm

2

जब आप (जैसे शब्द के रूप में) एक बाहरी कार्यक्रम में पाठ का चयन और एक वेब पेज पर खींचें, पृष्ठ के तत्वों dragenter माउस घटनाओं उत्पन्न होगा। मैंने क्रोम में इसका परीक्षण किया और यह मेरे लिए काम किया। उदाहरण के लिए, मैं document.body और घटनाओं प्राप्त करने के लिए एक dragenter श्रोता बाध्य कर सकते हैं भले ही कोई सामान्य माउस घटनाओं निकाल दिया जाता है:

function logEvent(e) { 
    console.log(e); 
} 

document.body.addEventListener('dragenter', logEvent); 

// MouseEvent {dataTransfer: Clipboard, toElement: body, ..., button: 0, ...} 

शायद आप अपने लाभ के लिए इसका उपयोग कर सकते हैं, क्योंकि dragenter घटना का मतलब है कि माउस खींच रहा है और बटन दबाया जाना चाहिए। इसके अलावा, आप प्राप्त कर सकते हैं पाठ घटना से डेटा हो रही द्वारा घसीटा जा रहा है:

e.dataTransfer.getData('text/plain'); 

आप getData कॉल में डेटा प्रकार सही उपयोग करने के लिए की जरूरत है। मैंने वर्ड में कुछ टेक्स्ट टाइप किया और text/plain के साथ उस ड्रैग किए गए टेक्स्ट को प्राप्त करने में सक्षम था।

संबंधित मुद्दे