0
我正在使用綁定到live()鼠標懸停事件的jQuery可拖放/ droppables。我正在使用,因爲我使用load()來加載頁面,並且需要這些元素在加載後可訪問。在Firefox和Safari中,我收到一個奇怪的行爲,當我最初加載頁面時,只有一些可拖拽區域可以工作。但是一旦放開可拖動的div,然後重新選擇它們,它們會再次神奇地工作。從奇怪的位置拖動拖動div有時會起作用。此外,在初始加載時,所有可投放區域都可以工作,但其中一些區域只有在最初「觸摸」後才能使用。這些最初的激活觸摸通常不是直接在div上,但有時會離開瀏覽器。不管怎麼說,這裏是我的代碼:jQuery中的不可預知的鼠標懸停行爲
$(document).ready(function() {
// Load main report object
function reload_report() {
$('#report').load('{% url timetracker.views.project_report report_id=report_meta.id %}');
}
reload_report();
// Binding dragging events
$('.worklog-row').live('mouseover', function() {
drag_worklogs(this);
return false;
});
// Binding dropping events
$('.dropTarget').live('mouseover', function() {
drop_worklogs(this, '{% url timetracker.views.move_worklogs report_id=report_meta.id %}', 'drop-hover', reload_report);
});
然後在鏈接的JS文件:
function drop_worklogs($this, post_url, hover_class, callback) {
$($this).droppable({
tolerance: 'pointer',
hoverClass: hover_class,
drop: function(event, ui) {
// Get ids of dropped worklogs
var worklogs = [];
ui.helper.children().each(function() {
var id = this.id;
id = id.split('-')[1];
worklogs.push(id);
});
var groupStr = $($this).attr('id');
var typeStr;
typeStr = groupStr.split('-')[0];
groupStr = groupStr.split('-')[1];
var requestArr = {
worklogs: worklogs,
group: groupStr,
type: typeStr
};
var requestData = JSON.stringify(requestArr);
//alert(requestData);
// Send to server via POST request
var success = false;
$.post(post_url, { move: requestData }, function() {}, "json");
callback();
}
});
}
function drag_worklogs($this) {
// Drag and drop
$($this).draggable({
helper:function() {
var selected = $('input:checked').parents('tr');
if (selected.length === 0) {
selected = $($this);
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
});
如果有人有辦法做到這一點沒有live(),允許抓取load()'頁面中的對象,我願意提供建議。 – Vince 2009-09-15 20:39:22