使用jQuery拖放时如何获取表单控件值

Question

I am creating an asp.net drag and drop application using jQuery. I have got the drag and drop working and communicating with a Windows Service. Now, what I need is to be able to pass the text value of what I am dragging as a parameter to the web service. Any ideas where I am going wrong?

I have a repeater control with a literal in it called lbName. The ClientIDMode = Inherit with a visibility of false. I need to get the text value of lbName and pass it to the Javascript shown below to be passed on to the web service.

Thanks

<li class="col-xs-5 ingredient draggable"><span>
                                                <asp:Literal ID="lbName" Text='<%# Eval("Name") %>' runat="server"></asp:Literal></span></li>

<script>
    $(function () {
        var webMethod = "http://localhost:53809/WebServices/DragDrop.asmx/GetFoodByName";

        $(".draggable").draggable({ helper: "clone" });

        $(".drag-div").droppable({
            accept: ".draggable",
            tolerance: "pointer",
            activeClass: "drop-here",
            hoverClass: "drop-here-hover",

            drop: function (event, ui) {

                $.ajax({
                        type: "POST",
                        url: webMethod,
                        data: "{'FoodName': '" + $(".draggable").find("lbFoodID").val() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: onSuccess,
                        error: onError
                });
            }
        });

        function onSuccess(data, status) {
            $("#lbFoodNamePopup").html(data.d);

            $.fancybox({
                href: '#add-quantity'
            });
        }
        function onError(request, data, status) {
            alert(request.status);
        }

    });
</script>

Answer 1

see this fiddle

use in drop function :

 var text = $(ui.draggable).find("#lblID").text();
 alert(text);