jstree dnd plugin: cannot drag and drop multiple nodes on the target without the previous dragged node getting overwritten

Question

Context : As shown in the code below in the input box inside the jsp, the fruit node from the "fruitTree" is to be dragged and dropped.

This is happening successfully on drag and drop.Every time I do a drag and drop of the fruit from the fruitTree, the previous dropped fruit node is being overwritten by the newly dragged and dropped fruit.

Problem: Now, the previously dropped fruit must not be overwritten by the new dragged and dropped fruit node. It should be possible to drag and drop multiple fruits inside the input box.

jsp:

      <div id = "mydiv">
            <form id="addFruits">
              <div id ="fruitDetails">
              <label>Name:</label>
               <input type="text" value="" name="fruitName" id="fruitNameId" class="jstree-drop"/>
        </div>
        </form>
        </div>
<div id="fruitTree">
</div>

In javascript:

$('div#fruitTree').jstree({

"crrm":{
"move":{
"check_move":function(m){
return false;
}
}
},
"json_data:{
"data":fruitDataReceivedFromDBSuccessfully
},
"themes":{
"theme":"apple",
"icons":true
},
"dnd":{
"drop_finish":function(data){
$('#fruitNameId').attr("value", $(data.o).attr("name");
},
"drop_check":function(data){}
},
"plugins":["themes","json_data","ui","languages","contextmenu","dnd","search","cookies","crrm","core"]
});

I am not sure if the jstree dnd plugin allows multiple drag and drops at the same target without the previous value being overwritten. I already tried using the core plugin of jstree to solve this as below but it didn't work:

"core" {
"multiple:true,
"animation":0
}

Any suggestions please?

Answer 1

As a workaround I already have done something as below:

    "drop_finish":function(data){
    if($('#fruitNameId').attr()!=""){
        $('#fruitNameId').attr().append($('#fruitNameId').attr("value", $(data.o).attr("name"));
} else {
    $('#fruitNameId').attr("value", $(data.o).attr("name")
    }
    }