Javascript jquery可用于多个分区

拖动在第一个分区中工作正常，但在下一个分区中工作不正常。我需要在不更改div Id/类名的情况下让它工作

在这里拉小提琴：

HTML:

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

​

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;
        }
    });
    });
});​

---

您需要更改html代码中的某些内容

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

这是小提琴：

这是小提琴

1） id应该总是唯一的。。。因此，将您的ID更改为类..

---

2） 在您的可拖动类中添加了

containment:$（此），

您需要对

html

以及

js

代码进行一些更改

参考这个

JS: $（文档）.ready（函数（）{ $（'.track'）.live（“悬停”，函数（）{

---

}))；​

首先-您必须更改火箭div的ID。ID必须是唯一的。在2）中使用class而不是IDor只需使用

包含：“parent”

。FAngel非常感谢…您节省了我的时间它在您的情况下工作，但这只是因为更改的布局掩盖了另一个错误（错误

包含
设置）.我想，改变布局并不是OP想要的
<div class="track">
<div id="rocket">    
</div>
</div>
<div style="clear:both">
<div class="track">
<div id="rocket">    
</div>
</div>

//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;
    }
});
});