在jquery中拖放html數據

我有一個正常的html部分，我放棄了一些html代碼。如果沒有項目，並且如果有項目我想在最後一個元素下面追加HTML代碼，並且每個元素都可排序，我需要它們在類.page-content-wrapper後追加。我通過JSON格式我的PHP函數拉出的HTML代碼，同時服用，CONSOLE.LOG我得到：在jquery中拖放html數據

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

我已經通過datatype是在ajax requestjson我只是拉出數據添加到可放置區域，以便我可以追加到可放置區域的最後一個元素。在那裏我只是將值返回給一個變量，並試圖將其附加到可放置元素中。以下是我的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在droppable部分顯示未定義。我堅持這些，幫助我出去。

來源

2016-06-30 Nitish Kumar

因爲你的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 
     });

我希望這可以幫助你。

來源

2016-06-30 15:45:31 gaetanoM

感謝您的更新，但是當我像這樣突破時，我在'myfunc'部分的'ui.draggable'處得到'ui'的未定義參考錯誤 –

@NitishKumar對不起，我的回答只是一種描述戰略。在回調函數中，您需要在droppable - drop事件中添加「event，ui」參數。我希望這可以幫助你。讓我知道。 – gaetanoM

是的，謝謝，它幫助.. :) –

在jquery中拖放html數據

回答

相關問題