Jquery on drop remove helper
Jquery on drop remove helper
我使用 jquery draggable 和 jquery droppable ,在 draggable 函数中我使用辅助克隆,当我放下被拖动的元素时,它应该删除克隆并显示另一个 div,在可放置的地方我有一个 div 里面是不可见的并且在放置时它应该是可见的,这是我的代码
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
// make the event draggable using jQuery UI
$(this).draggable({
helper:'clone',
zIndex: 999999,
containment: 'window',
appendTo:'body',
scroll: false,
revert: true, // will cause the event to go back to its
revertDuration: 0, // original position after the drag
// start: function(){
// $(this).fadeOut();
//
// },
// stop: function(){
// $(this).fadeIn();
// }
});
});
这是我的可放置函数
$(to).droppable({
drop: function ( event, ui ){
$("ui.draggable").clone().hide();
var avatar = '';
var user = ui.helper[0].id;
console.log("user", user);
var fullname = $('#'+user+' .fullName').text();
var hiddenInput = $('#'+user+' .userId').val();
console.log("ID: ", hiddenInput);
console.log(fullname);
$('#uname_here').text(fullname);
var userId = '#' + ui.helper[0].id + ' .userId';
$('.whenDropOwnerHideThis').hide();
$("div#dropedUser").show();
$('#dropUserForHeadOfProjectInput').val(hiddenInput);
$("#dropUserForHeadOfProject").removeClass('error_empty');
$("#drop_head_project").removeClass('error_empty');
}
});
这样不行,显示错误
Uncaught Error: Syntax error, unrecognized expression: # .fullName
我想你想通过 id
获取元素,它的 id
就像 user.fullname
而你在下面的代码中犯了一个错误:
var fullname = $('#'+user+' .fullName').text();
要使用 meta-characters 中的任何一个(例如 !"#$%&'()*+,./:;<=>?@[\]^``{|}~
)作为名称的文字部分,必须使用两个反斜杠将其转义 \
.例如,具有 id="foo.bar"
的元素可以使用选择器 $("#foo\.bar")
。 (More information)
因此您需要像这样更改代码:
var fullname = $('#'+user+'\.fullName').text();
您的 HTML 中必须有唯一的 id
,如果没有,则可以将 data-*
属性用于 select 任何元素。
同样从您的代码中,尝试从 select 中删除 space 或者如果您的元素的 id
具有 class fullname
之类的,
var fullname = $('#'+user+'.fullName').text();
// --------^^ remove the space from here
对 class userId
,
做同样的事情
var hiddenInput = $('#'+user+'.userId').val();
根据你的错误信息,我认为你没有从声明中得到 user-id
,
var user = ui.helper[0].id;// make sure it should not blank &
// an element having this id exists in DOM
问题是我无法正确获取 ID,所以这就是我现在获取 ID 的方式并且工作正常,
var user = ui.helper.context.id;
我使用 jquery draggable 和 jquery droppable ,在 draggable 函数中我使用辅助克隆,当我放下被拖动的元素时,它应该删除克隆并显示另一个 div,在可放置的地方我有一个 div 里面是不可见的并且在放置时它应该是可见的,这是我的代码
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
// make the event draggable using jQuery UI
$(this).draggable({
helper:'clone',
zIndex: 999999,
containment: 'window',
appendTo:'body',
scroll: false,
revert: true, // will cause the event to go back to its
revertDuration: 0, // original position after the drag
// start: function(){
// $(this).fadeOut();
//
// },
// stop: function(){
// $(this).fadeIn();
// }
});
});
这是我的可放置函数
$(to).droppable({
drop: function ( event, ui ){
$("ui.draggable").clone().hide();
var avatar = '';
var user = ui.helper[0].id;
console.log("user", user);
var fullname = $('#'+user+' .fullName').text();
var hiddenInput = $('#'+user+' .userId').val();
console.log("ID: ", hiddenInput);
console.log(fullname);
$('#uname_here').text(fullname);
var userId = '#' + ui.helper[0].id + ' .userId';
$('.whenDropOwnerHideThis').hide();
$("div#dropedUser").show();
$('#dropUserForHeadOfProjectInput').val(hiddenInput);
$("#dropUserForHeadOfProject").removeClass('error_empty');
$("#drop_head_project").removeClass('error_empty');
}
});
这样不行,显示错误
Uncaught Error: Syntax error, unrecognized expression: # .fullName
我想你想通过 id
获取元素,它的 id
就像 user.fullname
而你在下面的代码中犯了一个错误:
var fullname = $('#'+user+' .fullName').text();
要使用 meta-characters 中的任何一个(例如 !"#$%&'()*+,./:;<=>?@[\]^``{|}~
)作为名称的文字部分,必须使用两个反斜杠将其转义 \
.例如,具有 id="foo.bar"
的元素可以使用选择器 $("#foo\.bar")
。 (More information)
因此您需要像这样更改代码:
var fullname = $('#'+user+'\.fullName').text();
您的 HTML 中必须有唯一的 id
,如果没有,则可以将 data-*
属性用于 select 任何元素。
同样从您的代码中,尝试从 select 中删除 space 或者如果您的元素的 id
具有 class fullname
之类的,
var fullname = $('#'+user+'.fullName').text();
// --------^^ remove the space from here
对 class userId
,
var hiddenInput = $('#'+user+'.userId').val();
根据你的错误信息,我认为你没有从声明中得到 user-id
,
var user = ui.helper[0].id;// make sure it should not blank &
// an element having this id exists in DOM
问题是我无法正确获取 ID,所以这就是我现在获取 ID 的方式并且工作正常,
var user = ui.helper.context.id;