在 Jquery 中拖放 html 数据

Posted 2023-05-08

【中文标题】在 Jquery 中拖放 html 数据

【英文标题】：Drag and drop html data in Jquery

【发布时间】：2016-11-02 19:33:08

【问题描述】：

我有一个普通的 html 部分，我正在删除一些 html 代码。如果没有项目并且如果有项目我想在最后一个元素下方附加 html 代码并且每个元素都是可排序的，我需要它们附加在 .page-content-wrapper 类之后。我通过我的 php 函数以 JSON 格式提取 html 代码，同时将其带到 console.log 我得到：

Object htmlcode: "<div>//html code....</div>"

我已经在ajax request 中通过datatype 成为json 我只是将数据拉出到可放置部分，以便我可以附加到可放置区域中的最后一个元素。我只是将值返回给变量并尝试将其附加到可放置元素中。以下是我的 JQuery：

 var nitsbuilder = 
    nits_id: $('[data-nitsid]'),
    editarea: $('.page-content-wrapper')
;

 nitsbuilder.dropeventhandler = function (nits_id) 
    $.ajax(
        method: 'POST',
        url: dropurl,
        data:  nits_id: nits_id, _token: token,
        dataType: 'json',
        success: function (data) 
            console.log(data);
            return(data);
        
    );


nitsbuilder.init = function () 
    var navmenu= $('ul.nitseditormenu').find('li').find('ul').find('li');
    var origin= 'sortable';
    navmenu.draggable(
        connectToSortable: "nitsbuilder.editarea",
        helper: "clone",
        cursor: "move",
        start: function () 
            origin = 'draggable';
        
    );

    nitsbuilder.editarea.droppable(
       drop: function (event, ui) 
                var nits_id = ui.draggable.data('nitsid');
                code = nitsbuilder.dropeventhandler(nits_id);
                console.log(code);
            if(origin === 'draggable')
                ui.draggable.html(code);
                origin= 'sortable';
            
       
    ).sortable(
        revert: true
    );
();

Console.log 在可放置部分显示未定义。我被这些困住了，帮帮我吧。

【参考方案1】：

因为您的 nitsbuilder.dropeventhandler 函数执行 ajax 调用，所以即使您在 ajax 调用的成功部分中编写了 retun，您也不会得到任何返回值。

通常，您可以采用多种不同的方式进行操作。我解决这个问题的方法是使用回调：

当函数完成时，它会使用正确的数据执行我的回调。

所以我建议你以这种方式重新排列你的代码：

 nitsbuilder.dropeventhandler = function (nits_id, callback) 
        $.ajax(
            method: 'POST',
            url: dropurl,
            data:  nits_id: nits_id, _token: token,
            dataType: 'json',
            success: function (data) 
                console.log(data);

                //-----------------------------------
                // instead of :
                // return(data);
                callback(data);

                //-----------------------------------
            
        );
    

添加一个新函数（回调），例如：

function myfunc(code) 
            console.log(code);
            if(origin === 'draggable')
                ui.draggable.html(code);
                origin= 'sortable';
            
        

然后是最后一部分：

nitsbuilder.editarea.droppable(
            drop: function (event, ui) 
                var nits_id = ui.draggable.data('nitsid');

                 // use the callback function added to your object
                 nitsbuilder.dropeventhandler(nits_id, myfunc);
            
        ).sortable(
            revert: true
        );

希望对你有帮助。

【讨论】：

感谢您的更新，但是当我这样中断时，我在ui.draggable 中的ui.draggable 部分收到ui 的未定义引用错误

@NitishKumar 抱歉，我的回答只是向您描述策略的一种方式。在回调函数中，您需要添加您在 droppable -- drop 事件中拥有的“event, ui”参数。我希望这可以帮助你。告诉我。