1

在stackoverflow社区的帮助下，我几乎成功地编写了一个jQuery拖放“添加到收藏夹/从收藏夹中删除”网站。

在前端，出现了两个电影列表，一侧是用户收藏的电影，另一侧是不在用户收藏列表中的电影。您可以将标题拖到下拉框以从一个列表中添加/删除它们并将它们放入另一个列表中。这会在后台更新 MySQL 数据库，当标题被拖出列表时，它会根据需要从该列表中消失。

只有一件事仍然不起作用 - 将电影标题添加到它被拖入的列表的前端 - 这需要刷新页面以显示更新的结果。

我看到了问题 - 两个 jQuery 脚本不知道另一个在做什么 - 每个都可以毫无问题地从自己的列表中删除项目，但是如何告诉每个脚本添加到 OTHER 列表，我不知道.

我尝试使用 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();
               }
           });
        }
    });

}

任何帮助再次非常感谢！

4

0 回答 0