Jqueryでhtmlデータをドラッグアンドドロップします

Question

私はhtmlコードを削除する通常のhtmlセクションを持っています。私はそれらがクラスの後に追加する必要があります.page-content-wrapperアイテムが存在しない場合は、最後の要素の下にhtmlコードを追加する必要があり、各要素はソート可能です。私が手にconsole.logためにそれを取っている間、私はJSON形式での私のPHPの関数を使用してHTMLコードを引き出しています：

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

私はすでにajax requestでjsonするdatatypeを通過してきた私はちょうど引き出していますデータをドロップ可能セクションに追加して、ドロップ可能ゾーンの最後の要素に追加できるようにします。ここで私は単に値を変数に戻して、それをdroppable要素に追加しようとしています。未定義ドロップ可能なセクションが表示さで

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：以下は、私のjQueryのです。私はこれらのことにこだわり、人を助けます。

Answer 1

nitsbuilder.dropeventhandler関数はajax呼び出しを実行するので、ajax呼び出しの成功部分でretunを書き込んだとしても、戻り値は何も得られません。

通常、あなたはさまざまな方法で進むことができます。この問題に対処する私の方法は、コールバックを使用しています：

関数が終了すると、正しいデータでコールバックを実行します。

だから私はあなたがこの方法でコードを再配置することをお勧め：

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 
     }); 

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); 

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

は次のように新機能（コールバック）を追加します。

私はこれがあなたを助けてくれることを願っています。