Question

我尝试使用jquery UI拖放，我已将其更新为小提琴

的jsfiddle：

JQUERY CODE：

//draggable start
            $(function () {

        // jQuery UI Draggable
                $(".products-grid .item a img").draggable({

                    // brings the item back to its place when dragging is over
                    revert:true,

                    // once the dragging starts, we decrease the opactiy of other items
                    // Appending a class as we do that with CSS
                    drag:function () {
                        $(this).addClass("active");
                        $(this).closest(".products-grid .item a img").addClass("active");
                    //  $('.hover').css("display","none");


                    },

                    // removing the CSS classes once dragging is over.
                    stop:function () {
                        $(this).removeClass("active").closest(".products-grid .item a img").removeClass("active");
                    }
                });

                // 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") + "']");
                                 var param = $(ui.draggable).attr('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);
                            var price=move.find(".itemprices").html();

                        }
                        else {
                            // Add the dragged item to the basket

                            //alert(p);
                            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
                //+ '<span class="sno">1</span>'
                function addBasket(basket, move) {
                        var val=move.find(".product-name").html();
                        //alert(val);
                    basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'                          
                            + '<span class="name">' + move.find(".product-name").html() + '</span>'
                            + '<span class="price">' + move.find(".itemprices").html() + '</span>'
                            + '<input class="count" value="1" type="text" id="count">'
                            + '<button class="total">'+ (move.find(".itemprices").html())*($(".count").val())+'</button>'
                            + '<button class="delete">&#10005;</button>');

                }

                $("#count").on('change', function(){
                var v=$("#count").val();
                //  alert(v);
                });
                // The function that is triggered once delete button is pressed
                $(".basket ul li button.delete").live("click", function () {
                    $(this).closest("li").remove();
                });

            });
            //draggable ends

这里的拖放功能工作正常，但我如何获得产品名称和价格，任何帮助？

Answer 1

对于price =＆gt;

 $(".itemprices").text();

对于title =＆gt;

   $(".product-name").prop('title');

//新代码看看你是否有多个产品，为每个产品DIV分配单独的ID（你已经为它分配了类）。然后使用＃而不是'。' （DOT）。所以使用

var idStored=$(this).attr('id');
idStored.text();

idStored.text().prop('title');

然后在div的Hover上调用这些操作，或者点击

Answer 2

请尝试以下方法：
在addBasket(basket, move)功能中添加以下行：

var currentLIelement = $(move).parents('li');

因此，currentLIelement将是拖动元素的父<li>元素。

现在，要获得标题，您需要调用它：

$(currentLIelement).find('.product-name').prop('title')

要获得价格，您需要将其称为：

$(currentLIelement).find('.itemprices').text()

注意：在您的代码中，我找到了live()方法 - As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

如何查找可拖动产品相关值的名称，价格

2 个答案: