Question

I have drag and drop function with jquery. Dragging and dropping div inside this div tag there is few one image and two label how i can text in dropped div with label class?

Div:

 <div id="list_item" class="dragable">
                    <asp:Image ID="Image1" Height="50" Width="50" ImageUrl='<%# Eval("ProfilePicture")%>'
                        runat="server" />
                    <label id="list_item_username" class="friend_user_name">
                        <%# Eval("FriendUserName")%>
                    </label>
                    <label id="list_item_ranknumber">
                        <%# Eval("RankNumber")%></label>
                    <label id="list_item_rankname">
                        <%# Eval("RankName")%></label>
                </div>

this my jquery:

 $("#clan_drop").droppable({
    accept: ".dragable",

    drop: function (ev, ui) {

        UserCount++;

        if (UserCount > 10) {
            alert("You cannot add more users. Maximum quantity of gamers in one clan is 10");
        } else {

            $("#drag_here_container").css("display", "none");
            var droppedItem = $(ui.draggable).clone();
            $(this).append(droppedItem);
            var user = $(this).find('.friend_user_name').text();

            if ($.inArray(user, UsersList) > -1) {

                $('.dragable:last').remove();
            } else {

                UsersList.push(user);
                SendUserToC(user);
            }
        }
    }
});

this is what fire bug shows on var user:

Answer 1

text() method will get all the space and new line characters within the dom element. If you don’t want it then you can use jQuery’s trim method.

var user = $.trim($(this).find('.friend_user_name').text());