jQuery Sürüklenebilir() ve klavye kontrolü

Question

Merhaba, #person'da jQuery Draggable() etkinleştirilmiş ve #person'un #map ile kısıtlı olduğu bir sayfam var.

(eklenti link: http://docs.jquery.com/UI/Draggables/draggable)

Ancak, ben de klavyedeki ok tuşları ile kontrol ekledik. Şimdi, hepsi kısıtlı alanın kenarına (#map'un kenarına) ulaşıncaya kadar birlikte iyi oynarlar. Ben sürükleyerek am mı

ardından #person#map için kısıtlı alır - Ben ok tuşlarını kullanırsanız, #person#map kenarından öteye gidebilir.

nasıl sürüklenebilir yanı sıra ok tuşlarını sınırlamak olabilir? Klavye kontrolü için

Kodum:

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

         }); 
         break; 
          } 
}); 

**** vay be **** şerefe.

[DÜZENLE] Lütfen kimse? [/ EDIT]

Answer 1

Maalesef, jQuery UI Draggable öğesinin konumunu manuel olarak değiştirmek için herhangi bir yöntem sunmuyor. Klavyeyle hareket ettirirken # kişinin konumunu manüel olarak takip etmeniz ve #map'in sınırlarını aşmak üzere hareket ettirilmeniz gerekir.

.offset() ve .position() gibi jQuery yöntemlerini, öğeler için güvenilir konumlar bulmak için kullanabilirsiniz. Örneğin

:

$(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

birisi biraz tembel hissederse, bu sadece (basitleştirilmiş) kodlu budur:

keydown üzerine

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