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

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

Answer 1

这里是小提琴......

http://jsfiddle.net/zHyA9/30/

1）id应该始终是唯一的...所以chnaged ur ids to 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>

这里的小提琴：fiddle

Answer 3

您需要对html以及js代码进行多项更改。

请参阅此fiddle。

JS： $（document）.ready（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;
    }
});
});

}）;

jquery可拖动多个部门

3 个答案: