여러 divisions에 대해 jquery draggable

Question

드래그가 첫 번째 구획에서 올바르게 작동하지만 다음 구획에서 제대로 작동하지 않습니다. div Id/Class 이름을 변경하지 않고 작업을 수행해야합니다. 여기

바이올린 : JS Fiddle

HTML :

<div class="track"> 
    <div id="rocket">  
    </div> 
</div> 
<br><br><div style="clear:both"> 
<div class="track"> 
    <div id="rocket">  
    </div> 
</div> 

​ 

CSS :

.track { 
    height: 400px; 
    width: 48px; 
    overflow: hidden; 
    margin: 10px 0 0 10px; 
    float:left; 
    background: #ccc; 
} 
#rocket{ 
    height:48px; 
    width:48px; 
    background: url('http://cdn1.iconfinder.com/data/icons/Symbolicons_Transportation/48/Rocket.png'); 
    position:relative; 
    top:352px; 
} 
​ 

JQuery와 :

$(document).ready(function() { 
    $('.track').each(function(){ 


    //rocket drag 
    $(this).children("#rocket").draggable({ 
     containment: ".track", 
     axis: "y", 
     scroll: false, 
     start: function(event, ui) { 
      draggingRocket = true; 
     }, 
     drag: function(event, ui) { 
      // Show the current dragged position of image 


     }, 
     stop: function(event, ui) { 
      draggingRocket = false; 
     } 
    }); 
    }); 
});​ 

Answer 1

바이올린은 ...

http://jsfiddle.net/zHyA9/30/

1) ID

항상 고유해야는 ... 그래서 클래스에 UR ID를 chnaged ..
2) 담아 낼 수있는 클래스로 containment: $(this),을 추가

Answer 2

당신은 HTML 코드에서 어떤 것을 변경해야합니다. 여기에 바이올린

<div class="track"> 
<div id="rocket">  
</div> 
</div> 
<div style="clear:both"> 
<div class="track"> 
<div id="rocket">  
</div> 
</div> 

: 여기 fiddle

Answer 3

몇 개의 찬이 필요합니다. gs는 html이고 js 코드입니다.

이 내용은 fiddle을 참조하십시오. '. 트랙. :

JS $ (문서) .ready (함수() { $()는 ("호버"함수() {

//rocket drag 
$(this).children(".rocket").draggable({ 
    containment: this, 
    axis: "y", 
    scroll: false, 
    start: function(event, ui) { 
     draggingRocket = true; 
    }, 
    drag: function(event, ui) { 
     // Show the current dragged position of image 


    }, 
    stop: function(event, ui) { 
     draggingRocket = false; 
    } 
}); 
}); 

을}) 살고