如何为多个对象使用一个处理程序？

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>

with handler：

$(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选择器只会选择第一个元素。请尝试：

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

<强> Working Demo