Question

我使用了一些代码来拖放项目，这一切都有效。我需要创建一个表单，以便我可以保存已添加的选定项目，这是在PHP mySQL站点中执行此操作的最佳方法

（我正在构建一个Joomla组件BTW）

       // jQuery Ui Droppable
    $(".basket").droppable({

        // The class that will be appended to the to-be-dropped-element (basket)
        activeClass:"active",

        // The class that will be appended once we are hovering the to-be-dropped-element (basket)
        hoverClass:"hover",

        // The acceptance of the item once it touches the to-be-dropped-element basket
        // For different values http://api.jqueryui.com/droppable/#option-tolerance
        tolerance:"touch",
        drop:function (event, ui) {

            var basket = $(this),
                    move = ui.draggable,
                    itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");

            // To increase the value by +1 if the same item is already in the basket
            if (itemId.html() != null) {
                itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
            }
            else {
                // Add the dragged item to the basket
                addBasket(basket, move);

                // Updating the quantity by +1" rather than adding it to the basket
                move.find("input").val(parseInt(move.find("input").val()) + 1);
            }
        }
    });

    // This function runs onc ean item is added to the basket
    function addBasket(basket, move) {
        basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
                + '<span class="name">' + move.find("h3").html() + '</span>'
                + '<input class="count" value="1" type="text">'
                + '<button class="delete">&#10005;</button>');
    }


    // The function that is triggered once delete button is pressed
    $(".basket ul li button.delete").live("click", function () {
        $(this).closest("li").remove();
    });

});

Answer 1

您的问题有点不清楚，但假设您只想根据会话保存移动的ID，您可以创建一个服务器端脚本，您可以发布ID以保存到：

function addBasket(basket, move) {
   //existing code snipped
   $.post('/addbasket/', {id: move.data('id')}).done(function () {
      console.log('Basket item saved');
   });
}

JQuery通过表单拖放项目保存

1 个答案: