jquery drag and drop image's attribute into textarea

问题

I've been having a problem while testing drag and drop functionality. I need images to be draggable into a textarea, and when dropped, the text would be appended by a twitter username stored inside "data-twname" custom html attribute.

Problem appears when I type text inside the textarea - any subsequent drag&drop simply does not append twitter name to the text, even though it works in start. This is the jQuery code I use:

$(".draggie").draggable({
    containment: "parent",
    cursor: "move",
    revert: true,
    revertDuration: 100
});
var targetName;
$(".draggie").mousedown(function(){
    targetName = $(this).attr("data-twimage");
});
$("#textCompose").droppable({
    accept: ".draggie",
    drop: function(event) {
        $("#textCompose").append(targetName);
    }
});

I've made a demo here, to clarify: drop demo link

回答1:

I think you mean you can't append the value in case you already inserted some text. I created an fiddle for your example here: http://jsfiddle.net/QQWHg/

Replace:

$("#textCompose").append(targetName);

with:

$('#textCompose').val($('#textCompose').val() + targetName);

来源：https://stackoverflow.com/questions/14320081/jquery-drag-and-drop-images-attribute-into-textarea