jQuery ड्रैगगेबल() और कीबोर्ड नियंत्रण

Question

अरे वहाँ, मेरे पास jQuery ड्रैगगेबल() #person पर सक्षम एक पृष्ठ है और #person#map पर बाध्य है।

(प्लगइन के लिए लिंक: http://docs.jquery.com/UI/Draggables/draggable)

हालांकि, मैं भी नियंत्रण कुंजीपटल पर तीर कुंजी के साथ जोड़ लिया है। अब, जब तक मैं बाध्य क्षेत्र (किनारे #map) के किनारे तक पहुंच जाता हूं, तब तक वे सभी एक साथ अच्छी तरह से खेलते हैं।

अगर मैं खींच रहा हूँ, तो #person#map करने के लिए विवश हो जाता है - अगर मैं तीर कुंजियों का उपयोग, #person#map के किनारे से परे जा सकते हैं।

मैं तीर कुंजियों के साथ-साथ ड्रैगगेबल को कैसे रोक सकता हूं?

कुंजीपटल नियंत्रण के लिए मेरे कोड:

$(document).bind('keydown',function(e){ //set the keydown function as... 
     switch(e.which) { 
      case 37: $(characterName).animate({ 
          left: '-=40' 
         }, 250, function() { 

         }); 
         break; 
          } 
}); 

**** ओफ़्फ़ **** खुश होती है।

[संपादित करें] कृपया कोई भी? [/ EDIT]

Answer 1

दुर्भाग्य से, jQuery UI Draggable तत्व की स्थिति मैन्युअल रूप से बदलने के लिए किसी भी तरीके का खुलासा नहीं करता है। कीबोर्ड के साथ इसे स्थानांतरित करते समय आपको # व्यक्ति की स्थिति को मैन्युअल रूप से ट्रैक करना होगा, और #map की सीमाओं को पार करने के दौरान इसे स्थानांतरित करना बंद कर देना होगा।

आप तत्वों के लिए विश्वसनीय स्थिति खोजने के लिए .offset() और .position() विधियों जैसे jQuery विधियों का उपयोग कर सकते हैं।

उदाहरण के लिए:

$(document).bind(
    'keydown', 
    function(event) { 

     switch(event.which) { 
      case 37: { 

       var character = $(characterName); 
       var map = $('#map'); 

       if((character.offset().left - 40) > map.offset().left) { 
        character.animate(
         { 
          left: '-=40' 
         }, 
         250, 
         function(){} 
        ); 
       } 

       break; 
      } 
     } 
    } 
); 

Answer 2

कोई थोड़ा आलसी लगता है, यह है कि क्या मैं सिर्फ कोडित (सरलीकृत) है:

$('body').on('keypress', handleKeys); 

function handleKeys(e) { 
    var position, 
     draggable = $('#draggable'), 
     container = $('#container'), 
     distance = 1; // Distance in pixels the draggable should be moved 

    position = draggable.position(); 

    // Reposition if one of the directional keys is pressed 
    switch (e.keyCode) { 
     case 37: position.left -= distance; break; // Left 
     case 38: position.top -= distance; break; // Up 
     case 39: position.left += distance; break; // Right 
     case 40: position.top += distance; break; // Down 
     default: return true; // Exit and bubble 
    } 

    // Keep draggable within container 
    if (position.left >= 0 && position.top >= 0 && 
     position.left + draggable.width() <= container.width() && 
     position.top + draggable.height() <= container.height()) { 
     draggable.css(position); 
    } 

    // Don't scroll page 
    e.preventDefault(); 
} 

keydown पर