jquery - jQueryドラッグアンドドロップスクリプトを取得して、別のリストを更新します

Question

私は、stackoverflow コミュニティの助けを借りて、jQuery のドラッグ アンド ドロップによる「お気に入りへの追加/お気に入りからの削除」サイトのコーディングにほぼ成功しました。

フロント エンドでは、2 つの映画のリストが表示されます。一方にはユーザーがお気に入りに登録したもの、もう一方にはユーザーのお気に入りリストにないものがあります。タイトルをドロップ ボックスにドラッグして、1 つのリストから追加/削除し、別のリストに入れることができます。これによりバックグラウンドで MySQL データベースが更新され、タイトルがリストからドラッグされると、必要に応じてそのリストから消えます。

まだ機能しないのは 1 つだけです。映画のタイトルをフロントエンドでリストに追加する操作です。これは、更新された結果を表示するためにページを更新する必要があります。

私は問題を見ます - 2つのjQueryスクリプトは他の人が何をしているのか分かりません - それぞれが問題なく独自のリストからドラッグされたアイテムを削除しますが、各スクリプトに他のリストに追加するように指示する方法はわかりません.

connectWith を使用してみましたが、混乱しました....

HTML (映画リスト):

<div class="content_box2 content_box_drag2" onMouseOver="drag_two();">
    (PHP-generated list of all available movies)
</div>

<div class="content_box_drop content_holder_box">
    <p class="dropper">Drop movie title here to remove from favourites</p>
</div>

HTML (お気に入りリスト):

<div class="content_box content_box_drag" onMouseOver="drag();">
    (PHP-generated list of favourite movies)
</div>

<div class="content_holder_box2 content_box_drop2">
    <p class="dropper2">Drop movie title here to add to favourites</p>
</div>

お気に入りから映画を削除するスクリプト:

var user_id = "<?php Print($user_id); ?>";

function drag(){

    $( ".content_box_drag p" ).draggable({
        appendTo: "body",
        helper: "clone",
        revert: "invalid",
    });

    $( ".content_box_drop p" ).droppable({
        activeClass: "dropper_hover",
        hoverClass: "dropper_hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
        var parent = $(".dragelement:last"); // KEEP THIS!
        var movie_id = parent.attr('id');    // KEEP THIS!              
           $.ajax({
               url: "php-includes/delete_favs.inc.php",
               type: "GET",
               data: { movie_id: movie_id, user_id: user_id },
               success:function(data){
                   $('#'+movie_id).remove();
               }
           });
        }
    });
}

映画をお気に入りに追加するためのほぼ同じスクリプト:

var user_id = "<?php Print($user_id); ?>";

function drag_two(){

    $( ".content_box_drag2 p" ).draggable({
        appendTo: "body",
        helper: "clone",
        revert: "invalid",
    });

    $( ".content_box_drop2 p" ).droppable({
        activeClass: "dropper_hover2",
        hoverClass: "dropper_hover2",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
        var parent = $(".dragelement:last"); // KEEP THIS!
        var movie_id = parent.attr('id');    // KEEP THIS!              
           $.ajax({
               url: "php-includes/add_favs.inc.php",
               type: "GET",
               data: { movie_id: movie_id, user_id: user_id },
               success:function(data){
                   $('#'+movie_id).remove();
               }
           });
        }
    });

}

どんな助けでも大歓迎です！