Básicamente, he creado una plantilla html de arrastrar y soltar con javascript, lo que quiero es obtener el html interno del elemento arrastrado en el botón al hacer clic ('') automáticamente para ejecutar una función, lo que significa que lo que sea que se arrastre agregue el nombre del elemento en el botón al hacer clic ( '').

Por favor, ayúdame con esto..

 <button class="btn btn-primary pull-right" id="show_graph">SHOW</button>

código JavaScript

 $('.drag').draggable({
 appendTo: 'body',
 helper: 'clone'
 });

 $('#dropzone').droppable({
 activeClass: 'active',
 hoverClass: 'hover',
 accept: ":not(.ui-sortable-helper)", 
 drop: function (e, ui) {
 var $el = $('<div class="drop-item"><details><summary>' + ui.draggable.text() + '</summary><div><label>More Data</label><input type="text" /></div></details></div>');
 $el.append($('<button type="button" class="btn btn-default btn-xs remove"><span class="fa-solid fa-trash text-white "></span></button>').click(function () { $(this).parent().detach(); }));
 $(this).append($el);
 }
 }).sortable({
 items: '.drop-item',
 sort: function () {
 $(this).removeClass("active");
 }
 });

Aquí está el bucle for usado con la ayuda de Django y estos son los elementos que se pueden arrastrar.

 {% for item in head %}
 <div class="col-12">
 <a class="border border-light btn att1 btn-default drag text-white my-2">{{item}}</a>
 </div>
 {% endfor %}