javascript - jquery可拖动用于多个部门

Question

Drag 在第一个分区中正常工作，但在下一个分区中不能正常工作。我需要在不更改 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;
}
​

查询：

$(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 应该始终是唯一的...因此将您的 id 更改为 class..
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>

这里的小提琴：小提琴

Answer 3

您需要对html代码进行一些更改js。

参考这个小提琴。

JS: $(document).ready(function() { $('.track').live("hover",function(){

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

});​</p>