![](/img/trans.png)
[英]JqueryUI Drag: Cursor not at the same position as draggable element
[英]On dragging one jqueryUI draggable element trigger drag on other multiple elements
例如,我有三個可拖動元素,如下所示:
<div class="draggable main">Main</div>
<div class="draggable followers">Follower</div>
<div class="draggable followers">Follower2</div>
如果.main
被拖動,我們也需要拖動.followers
。 不僅是位置,而且還會觸發其中的所有可拖動事件,例如開始,拖動,停止。 請注意,關注者將是普通的可拖動元素。 剛拖動.main時,它們應該隨其一起移動,就好像它們處於同一可拖動元素中一樣,也觸發所有.follower
可拖動元素的事件。
這是JS
jQuery('.draggable.followers').draggable();
jQuery('.draggable.main').draggable({
// If .main is dragged, We need .followers to be dragged too. Not just positions but also triggering all the draggable events in them like start, drag, stop.
});
這是jsfiddle http://jsfiddle.net/9x56E/1/
只是通過如下方式將HTML改組一下來“欺騙”一下:
<div class="special-draggable">
<div class="main">Main</div>
<div class="draggable followers">Follower</div>
<div class="draggable followers">Follower2</div>
</div>
稍微調整一下CSS:
.draggable{
border: 1px solid red;
width: 60px;
height: 60px;
}
.main{
width: 300px;
border: 1px solid red;
height: 60px;
}
然后是jQuery:
jQuery('.draggable.followers').draggable();
jQuery('.special-draggable').draggable();
http://jsfiddle.net/Niffler/9x56E/2/
編輯 :抱歉,錯過了有關必須觸發可拖動事件的部分...
這個怎么樣:
$(function() {
$('.draggable.followers').draggable();
$('.draggable.main').draggable();
/* trigger dragstart on followers when main is dragged */
$('.draggable.main').on('dragstart', function() {
$('.draggable.followers').each(function() {
$(this).trigger('dragstart');
});
});
/* trigger drag on followers when main is dragged and adjust position */
$('.draggable.main').on('drag', function() {
var maintop = $(this).css('top');
var mainleft = $(this).css('left');
$('.draggable.followers').each(function() {
$(this).trigger('drag');
$(this).addClass('ui-draggable-dragging');
$(this).css('margin-left', mainleft);
});
$('.draggable.followers:first').css('margin-top', maintop);
});
/* trigger dragstop on followers when main is dragged and adjust position */
$('.draggable.main').on('dragstop', function() {
var maintop = $(this).css('top');
var mainleft = $(this).css('left');
$('.draggable.followers').each(function() {
$(this).trigger('dragstop');
$(this).removeClass('ui-draggable-dragging');
$(this).css('margin-left', mainleft);
});
$('.draggable.followers:first').css('margin-top', maintop);
});
/* test different actions on .followers */
$('.draggable.followers').on('dragstart', function() {
// do something
});
$('.draggable.followers').on('drag', function() {
// do something
});
$('.draggable.followers').on('dragstop', function() {
// do something
});
});
這是一個小提琴: http : //jsfiddle.net/Niffler/6TZp3/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.