여러 객체에 하나의 핸들러를 사용하는 방법은 무엇입니까?

Question

this jsfiddle code에 나타낸 바와 같이 : 핸들러

<div id="draggable" class="ui-widget-content"> 
<p>Drag me 1</p> 
</div> 
<div id="draggable" class="ui-widget-content"> 
<p>Drag me 2</p> 
</div> 

는 :

$(function() { 
$("#draggable").draggable(); 
}); 

은 어떻게 첫번째 것과 두번째 사각형을 드래그 할 수 있습니까?

Answer 1

아이디의이 고유해야합니다. 클래스 선택기를 사용하십시오. 이 시도 :

$(function() { 
$(".ui-widget-content").draggable(); 
}); 

참조 : https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really

DEMO

Answer 2

id 선택기 대신 클래스 선택기를 사용하십시오. 당신은 페이지에 중복 ID를 가지고 있고, ID 선택기는이 처음 element.Try을 선택합니다 :

$(function() { 
    $(".ui-widget-content").draggable(); 
}); 

Working Demo