jquery可拖動多個部門

拖動在第一個分區中正常工作，但在下一個分區中不能正常工作。我需要在不更改div ID/Class名稱的情況下運行它。jquery可拖動多個部門

小提琴這裏：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; 
     } 
    }); 
    }); 
});

來源

2012-11-08 Daniel Euchar

首先 - 你必須改變火箭div的ID，ID必須是唯一的，使用class而不是ID –

這裏是小提琴...

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

1）ID應該永遠是獨一無二的......所以chnaged烏爾IDS類..
2）添加containment: $(this),您拖動的類

來源

2012-11-08 11:06:18 bipen

或者2）簡單地使用'containment：「parent」'。 –

FAngel謝謝你，我挽救了我的一天 –

您需要更改HTML代碼中的一些事情。

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

這裏小提琴：fiddle

來源

2012-11-08 11:03:25 Selvamani

它適用於你的情況，但這只是因爲佈局改變，掩蓋了另一個bug（錯誤的'containment' set），而changin一個佈局不是OP想要的我猜 –

您需要幾個chan您的html以及js代碼。

請參閱此fiddle。 '跟蹤'：

JS $（文件）。就緒（函數（）{$ （）生活（「盤旋」，函數（）{

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

}）;

來源

2012-11-08 11:07:51

jquery可拖動多個部門

回答

相關問題