Reverting a drag to a sortable

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<ul id="draggable">
    <li class="ui-state-default"><div class="col-xs-12 pdg-none">
                                    <p class="checkSideLabel">
                                        <a href="#" class="" rel="popover" data-popover-content="#myPopover" data-placement="bottom">
                                            International Women’s
                                            Day Celebration
                                        </a>

                                    </p>
                                    <p>Article - Text</p>
                                    <p>
                                        <b>Scatter Delivery Date:</b><br>
                                        20/3/2018
                                    </p>
                                </div></li>
    <li class="ui-state-default">Text Field</li>
    <li class="ui-state-default">Image</li>
</ul>

<ul id="sortable" class="ui-state-highlight">
</ul>

<div id="tmp"></div>

CSS

li {
    margin: 5px;
    padding: 5px;
    width: 150px;
}

#sortable {
    margin-top: 16px;
    min-height: 256px;
}

JavaScript

$(document).ready(function() {
    $tmp = $("#tmp").get(0);
    
    $("#sortable").sortable({
        start: function(event, ui) {
        },
        stop: function(event, ui) { 
            console.log("isNew : ", jQuery.data($tmp, "isNew"));
            console.log("resultHTML : ", jQuery.data($tmp, "resultHTML"));
        }
    });

    $("#draggable li").draggable({
        connectToSortable: "#sortable",
        start: function(event, ui) {    

            //Store info in a tmp div         
            jQuery.data($tmp, "isNew", true);
            jQuery.data($tmp, "resultHTML", "<b>Here I will add some custom html to EVENT data</b>");
            
        },
        helper: function(event) {
            return "<div class='custom-helper'>Custom helper for " + $(this).context.innerHTML + "</div>";   
        },
        revert: "invalid"
    });
});