0

ドラッグは最初の部門では正しく機能しますが、次の部門では正しく機能しません。div Id/Class名を変更せずに機能させる必要があります。

ここでフィドル：JSフィドル

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

3 に答える 3

1

これがフィドルです...

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

1）idは常に一意である必要があります...したがって、ur idをクラスに変更します。2） urドラッグ可能なクラスに
追加 します。containment: $(this),

于 2012-11-08T11:06:18.383 に答える
0

HTMLコードで何かを変更する必要があります。

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

ここでフィドル：フィドル

于 2012-11-08T11:03:25.203 に答える
0

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>

于 2012-11-08T11:07:51.060 に答える