Przenoszenie obiektu w obszarze zewnętrznym ze wskaźnikiem

Ktoś, potrzebuję pomocy, mam zadanie od mojego nauczyciela, chodzi o jquery, ale znalazłem kłopot, może mógłbyś pomóc. Studium przypadku przedstawiono poniżej. Punkty są takie, że gdy przesuniesz wskaźnik myszy na polu niebieskiego pola, obiekt w polu czerwonych pól przesunie się, aby podążać za ruchem wskaźnika myszy w obszarze niebieskiego pola.Przenoszenie obiektu w obszarze zewnętrznym ze wskaźnikiem

enter image description here

Tytuł:
1. białe pole, niebieski i czerwony pudełko skrzynka jest DIV.
2. Czerwone pole i niebieskie pole to absolutna pozycja w Białym polu
3. Niebieskie kółko w niebieskim polu oznacza przesunięcie wskaźnika myszy.
4. Czarne kółka oznaczają obiekty, które przychodzą, aby przenieść, gdy wskaźnik myszy jest przesuwany do wnętrza blue box, pozycja czarne koła muszą nadal wewnątrz czerwonym polu

Poniżej znajdują się wyniki do tej pory mam.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div.moved { position: relative; width:620px; height:620px; top: 10px; background:blue; border:2px groove; margin: 0 auto;} 
    div.tujuan { position: absolute; width:400px; height:400px; top: 0; left: 0; background:red; border:2px groove; } 
     div.korban { position: absolute; width:40px; height:40px; top: 0; left: 0; background:white; border:2px groove; } 
    div.sumber { position: absolute; width:200px; height:200px; bottom:0; right: 0; background:yellow; border:2px groove; cursor: pointer;} 

    p { margin:0; margin-left:10px; color:red; width:220px; 
     height:120px; padding-top:70px; 
     float:left; font-size:14px; } 
    span { display:block; } 
    </style> 
    <script src="jquery-latest.js"></script> 
</head> 
<body> 
    <p> 
    <span>Move the mouse over yellow box.</span> 
    <span>&nbsp;</span> 
    </p> 

    <div class="moved"> 
     <div class="sumber"></div> 

     <div class="tujuan"> 
      <div class="korban"></div> 
     </div> 
    </div> 
<script> 
    $("div.sumber").mousemove(function(e){ 

     var moveX = e.pageX-this.offsetLeft; 
     var moveY = e.pageY-this.offsetTop; 
     $("span:first").text(" LEFT : " + moveX + " , TOP : " + moveY); 

     var korban = $('div.korban').offset(); 
     var moveX2 = e.pageX - korban.left; 
     var moveY2 = e.pageX - korban.top; 
     $("span:last").text(" LEFT : " + moveX2 + " , TOP : " + moveY2); 

     $('div.korban').css({'margin-left' : moveX , 'margin-top' : moveY }) 
    }); 
</script> 

</body> 
</html>

Źródło

2012-04-10 Fredy

To może pomóc http://jsfiddle.net/elclanrs/jF27b/ – elclanrs

Czy tego chcesz? I uproszczone kodu nieco

http://jsfiddle.net/P7PBx/8/

$("div.sumber").mousemove(function(e){ 
     var left = e.pageX - $(this).offset().left; 
     var top = e.pageY - $(this).offset().top;   
     $('span:first').text(left + ' ' + top); 

     top*=2; left*=2; 
     if(top > 360) top = 360; 
     if(left > 360) left = 360; 
     $('div.korban').css({ 
      'top':top, 
      'left':left 
     });   
});

Źródło

2012-04-10 03:59:10

to wszystko, chłód .. – Fredy

@Fredy ganteng ye –

Przenoszenie obiektu w obszarze zewnętrznym ze wskaźnikiem

Odpowiedz

Powiązane problemy