jQuery可拖動對象內的滾動問題溢出：當使用appendTo：'body'時隱藏容器

我有一個可拖動的對象，可以在幾個可拖放對象中接受..我已經把所有的可拖放對象放在一個容器中，，只是希望能夠當拖動懸停在droppables的容器檢測...jQuery可拖動對象內的滾動問題溢出：當使用appendTo：'body'時隱藏容器

起初，我試圖利用的「過度」和droppables「出來」的回調，但它不工作因爲從一個droppable懸停到另一個（在同一個容器內）導致它認爲鼠標已經離開容器...

所以我的下一個方法是在拖動啓動回調中，爲mouseenter做一個事件監聽器，老鼠留在container--，然後停止監聽牽引止擋回調...

然而，這導致總的瘋狂行爲......如果你看一下我的例子頁：

http://collinatorstudios.com/www/jquery_draggable_test.html

當把這個盒子拖到紅色的dropzone中時，你應該會在mouseenter事件觸發時看到「enter」，而在mouseleave發生時會看到「離開」。但是，只要將盒子拖到容器內部就會導致「離開」時間.....我無法弄清楚爲什麼會發生這種情況，也不知道我的問題有什麼解決方案，所以我可以做我需要的。我一直在爲此工作了近4個小時，並且對於看起來應該如此簡單的實現而失去了主意。

任何幫助將不勝感激...謝謝。

來源

2011-02-22 patrick

你只需要綁定到事件一次！沒有必要每次都綁定和解除綁定......我將它們在下面的代碼中分離出來，以使綁定更加清晰。

而正如ZDYN所說的（+1給他），你需要包括一個可代碼代碼，而不是使用容器，使用裏面的區域...這是一個demo和下面的完整代碼。

var feedback = $('#feedback'); 

$('.item').draggable({ 
    revert: true, 
    zIndex: 999, 
    cursor: 'move' 
}); 

$('.drop_zone').droppable({ 
    drop: function(event, ui) { 
     ui.draggable.appendTo($(this)); 
    } 
}).bind('dropover dropout', function(e) { 
    var id = this.id; 
    feedback.text(e.type === 'dropover' ? 'Over: ' + id : 'Out: ' + id); 
});

來源

2011-02-23 03:38:38 Mottie

嗨，你會介意你在那裏做了什麼嗎？您將拖動器添加到dropzone？這意味着該元素正在移動，因此它是dropzone的孩子？這是什麼原因？ – patrick 2011-02-23 08:32:06

嗨帕特里克！，拖放的常見原因是將物品從一個地方移到另一個地方。如果你看看這個可放下的演示（http://jqueryui.com/demos/droppable/#photo-manager），你會發現該項目被丟棄在垃圾桶中。如果您製作購物車，那麼您需要在追加對象之前克隆該對象。 – Mottie 2011-02-23 19:37:59

噢好吧..乍一看我不知道你在做什麼，因爲額外的.bind添加到實際的下拉回調。但是，在查看完畢後，您的代碼仍然無法完成我正在查找的內容。我真正想要做的是當可拖動內容進入外部容器時，開始/停止跟蹤鼠標移動，所以我簡化了它，以便能夠檢測它何時超出/離開容器。我做了一個新的小提琴 - 但是當從一個拖放區拖到另一個拖放區時，容器的上/下被調用，我不知道爲什麼。 http://jsfiddle.net/4hDa8/ – patrick 2011-02-23 20:58:14

嘗試增加可投放的容器：

$('#drop_zone_container').droppable({ 
    over: function(){ feedback.text('enter')}, 
    out: function(){feedback.text('leave')} 
});

來源

2011-02-23 00:03:18 zdyn

我試過了，但沒有成功。它引起了奇怪的行爲，有時可丟棄的容器註冊了drop事件，而不是容器內的可放入事件...因此，內部可拖動事件的drop事件並沒有被調用，因爲顯然外部容器的drop被觸發了。 ..但它很奇怪和間歇，當我嘗試使用它時，看起來非常麻煩。 – patrick 2011-02-23 02:30:31

@patrick，嘗試給他們的droppables中的子元素選項'貪婪：true'。看到這個頁面的更多細節：http://jqueryui.com/demos/droppable/#propagation。 – zdyn 2011-02-23 03:01:35

jQuery可拖動對象內的滾動問題溢出：當使用appendTo：'body'時隱藏容器

回答

相關問題