Jquery drag and drop

You can do this by linking to the drop event.
Here is my version of the code (you will need to adapt as you did not give us enough code to figure out exactly what you are doing so I filled in the gaps)
jQuery

<script>
$(function() {
  var dragme = $("#attachmentContainer ul li a");
  $('body').on('click','a.loadattachment', function(e) {
    e.preventDefault();
    LoadAttachment(this.dataset.attachment);
  });

    var container = $("#cartcontainerid");
  
  // Get the template
  var template = $('#template').html();
  console.log(template);
    dragme.draggable({
        revert: "invalid",
        stack: ".draggable",
        helper: 'clone'
    });

    container.droppable({
    drop: function (event, ui) {
      var containerList = $("#cartcontainerid ul li")
      var droppable = $(this);

      if (containerList.length == 0) {
        accept: dragme;
        var draggable = ui.draggable.clone().detach();
        draggable.append(template);
        draggable.clone().appendTo(droppable);
      }
    }
  });
  
  function LoadAttachment($doc) {
    alert('loading attachment');
  }
});
</script>

Select allOpen in new window

Working sample here

I made a few changes. I moved the onclick to an event handler.
I added a <script> template to hold the code you want to add to the dropped element. Another option would be to include this in the original element and hide it with css using the parent container in the path. That way when it is added to the target container it will be visible - however this is a lot of extra markup - I leave it to you to decide which version to go for.

Hi Julian,
Thank you for your reply.
I think that I missed understood your code or I didn't really explained my question right.

Let me simplify my question:
Let's say that I have  <a>whatever</a> and I want to drag it to this div = <div id="containerid"></div>.
Now after I drag this <a> element to the <div id="containerid"></div> I want to add a ul li and span.
Example after I drag into the "containerid" I would like to see:
 <ul><li><a>whatever</a><span></span></li></ul>


Let me know if that make sense to you, or maybe your answer is correct but I missed understood.

Thank you julian.

Still not clear.
Let's say you drag two items - do you want

 <ul><li><a>item 1</a><span></span></li></ul>
 <ul><li><a>item 2</a><span></span></li></ul>

Select allOpen in new window

OR

<ul>
  <li><a>item 1</a><span></span></li>
  <li><a>item 2</a><span></span></li>
</ul>

Select allOpen in new window

sorry Julian.
Here I will try again :).

Here is my dom:

//drag
 <div class="tab-pane active" id="attachmentContainer">
                            <ul>
                                <li><a onclick="LoadAttachment('https://demo.leadtools.com/images/pdf/leadtools.pdf')" href="#">leadtools.pdf</a></li>
                                <li><a onclick="LoadAttachment('http://localhost:60219/LeadToolsDocsLocation/developer.pdf')" href="#">doc1.pdf</a></li>
                                <li><a onclick="LoadAttachment('http://localhost:60219/LeadToolsDocsLocation/Executiv.pdf')" href="#">doc2.pdf</a></li>
                                <li><a onclick="LoadAttachment('http://localhost:60219/LeadToolsDocsLocation/citrixFarm.docx')" href="#">doc3.docx</a></li>
                                <li><a onclick="LoadAttachment('http://localhost:60219/LeadToolsDocsLocation/myson.jpg')" href="#">doc4.jpg</a></li>
                            </ul>
                        </div>
//drop
<div class="well" id="cartcontainerid" style="height:200px;">
                    
  </div>

Select allOpen in new window

Here is what I want to do:
when I drag one of the li I would like to drop it to the id="cartcontainerid" and get something like that:

<div class="well" id="cartcontainerid" style="height:200px;">
               <li>
                     <a onclick="LoadAttachment('http://localhost:60219/LeadToolsDocsLocation/myson.jpg')" href="#">doc4.jpg</a>
                      <span>AddMewithdrop</span>
              </li>     
  </div>

Select allOpen in new window

Basically what I want to know is how I can add this span after I dropped or I should do it before my drop.

Julian, what it this template stand for?

k i got it julian,

you are the best

Thank you.

You are welcome.