急！jQuery拖拽中的问题:怎么对有相同id的div绑定拖拽？

Question

jQuery拖拽中的问题:怎么对有相同id的div绑定拖拽？
代码如下
<script type="text/javascript"> $(function() { //绑定拖拽事件
$("#draggable1").draggable({
cancel: '.sub',
revert:'invalid',
opacity: "0.5",
containment: 'document', 
helper: 'clone'//克隆
});
}<div id="KPI1"  class="ui-widget-header">
 <div id="draggable1" class="drag1 ui-widget-content">
       <h4>dev1</h4>
      <div id="draggable1F" class="sub ui-widget-content">
            <h5>1F</h5>
              </div>
  <div id="draggable1G" class="sub ui-widget-content">
            <h5>1G</h5>
              </div>   
        </div>
</div><div id="KPI2"  class="ui-widget-header">
 <div id="draggable1" class="drag1 ui-widget-content">
    <h4>dev1</h4>
<div id="draggable1H"  class="sub ui-widget-content">
  <h5>1H</h5>
</div>
<div id="draggable1I"  class="sub ui-widget-content">
  <h5>1I</h5>
</div>
<div id="draggable1J"  class="sub ui-widget-content">
  <h5>1J</h5>
</div>
</div>
</div>我需要两个dev1都能拖拽，但是现在只能设置一个拖拽，怎么设置那个dev1拖拽？

Answer 1

ID不能定义一样的，可以用$(".drag1 ui-widget-content")获取2个DIV

Answer 2

一般来说元素的ID都不会设置成一样的，因为ID就是唯一的。jquery的选择器是很强大的，可以为需要拖动的div添加一个自定义的属性，使用jquery很容易获取这些元素。<div draggable="1"></div><div draggable="1"></div><div draggable="1"></div>
$(function() {        //绑定拖拽事件
        $("div[draggable]").draggable({
        cancel: '.sub',
        revert:'invalid',
        opacity: "0.5",
        containment: 'document', 
        helper: 'clone'//克隆
        });
}

Answer 3

如果id不设置成一样的，那么我的两个dev1下的子div就不能实现融合。只有dev1的id设置成一样的，才能实现我想要的效果。

Answer 4

try....
$("div[id='draggable1']")