[SOLVED] jQuery drag and drop, get the dropped CLONE instead of the regular drop

jQuery drag and drop, get the dropped CLONE instead of the regular drop

I am using jQuery to create a drag and drop page. With this code below you can normally put the dropped object in a variable.

  $("html").on("drop", function(event, ui) {
     event.preventDefault();  
     event.stopPropagation();
    var dropVar = $(ui.draggable);
    }

However I use:

 helper: "clone"

the variable dropVar which I have created will contain the normal dropobject, but I need it to contain the clone.

How can I put the dropped clone in a variable?

My entire code:

</head>
  <body>
    <div id="menu">
        <div class="titel p">
            p
        </div>
        <div class="titel h">
            h1
        </div>
        <div class="titel"><img height="60" id="block3" src="blue.png" width="150"></div>
        <div class="titel"><img height="60" id="block4" src="yellow.png" width="150"></div>
        <div class="titel"><img height="60" id="block5" src="pink.png" width="150"></div>
    </div><br>
    <table>
        <tr>
            <td>
                <div class="ui-sortable ui-droppable" id="droppable"></div>
            </td>
        </tr>
    </table>
    <script>
       var round = false;
       $(function() {

       $( ".draggable" ).draggable({
         connectToSortable: "#sortable",
         helper: "clone",
         revert: "invalid"
       });

       $(".titel").draggable({ 
           revert: "invalid",
           helper: "clone" 
       });   
       $("#droppable").droppable({
           activeClass: "ui-state-default",
           hoverClass: "ui-state-hover",
           drop: function(event, ui) {
               var newClone = $(ui.helper).clone();
               $(this).append(newClone);
           }
       });
       });

       $("html").on("drop", function(event, ui) {
       event.preventDefault();  
       event.stopPropagation();
        var hoi = $(ui.draggable);
        debugger;
        if(hoi.hasClass("p") && hoi.hasClass("ui-draggable-dragging")){
        alert("yo");
        hoi.innerHTML = "<p contenteditable='true'>type here<\/p>";
        }
       });

       $(document).click(function(e) {
           console.log(e);
           var el = $(e.target).parent();
           if(el.hasClass("ui-draggable-dragging")){
               el.hide();
           }
           
       })

       $(".ui-draggable-dragging").click(function(){
       $(this).hide();
       });

    </script>
</body>

Solution

You should be able to access the helper object with the below:

ui.helper[0]

Let me know if it helps.