Jquery on drop remove helper

Posted 2023-05-08

【中文标题】Jquery on drop remove helper

【英文标题】：

【发布时间】：2018-08-01 06:39:26

【问题描述】：

我使用 jquery draggable 和 jquery droppable ，在可拖动函数中我使用辅助克隆，当我放下拖动的元素时，它应该删除克隆并显示另一个 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

【问题讨论】：

您可以添加一些 html 片段来澄清您的问题吗？

【参考方案1】：

我认为你想通过id 获取元素，它是id 就像user.fullname 并且你在下面的代码中犯了一个错误：

var fullname = $('#'+user+' .fullName').text();

要将任何元字符（例如 !"#$%&'()*+,./:;<=>?@[\]^``|~ ）用作名称的文字部分，必须使用两个反斜杠 \\ 对其进行转义 .例如，带有id="foo.bar" 的元素可以使用选择器$("#foo\\.bar")。 (More information)

所以你需要像这样改变你的代码：

var fullname = $('#'+user+'\\.fullName').text();

【参考方案2】：

您的 HTML 中必须有一个唯一的 id，如果没有，那么您可以使用 data-* 属性来选择任何元素。

同样从您的代码中，如果您的元素的 id 具有类 fullname 之类的类，请尝试从选择器中删除空格，

var fullname = $('#'+user+'.fullName').text();
               // --------^^ remove the space from here

对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

【讨论】：

只有当我添加助手克隆时它才会显示该错误，当我删除助手克隆时它工作正常吗？我会试试这些东西，让你知道

【参考方案3】：

问题是我无法正确获取 id，所以这就是我现在获取它的方式，它工作正常，

var user = ui.helper.context.id;