使用Jquery UI开始拖动时更改HTML

Question

我一直在使用jquery UI拖放UI。

我有很多像这样的元素，可以拖动：

 <a href="#" draggable="true" id="server" class="draggable"><i class="fa fa-laptop fa-fw"></i> Server</a>

我可以将其拖放到放置区域。但是当我开始拖动原始元素时，我想将HTML更改为

<i class="fa fa-laptop fa-5"></i>

当前代码看起来像这样，但我应该在启动事件处理程序中做一些事情来克隆，并更改克隆元素的html吗？

function MakeDraggable(ele) {
    ele.draggable({
        grid: [20, 20 ],
        //revert: "invalid",
        helper: 'move'
    });
}

$(function() {

    // Make the .draggable class  a Draggable
    //
    $( ".draggable" ).draggable({
        grid: [ 20, 20 ],
        helper: 'clone',
        appendTo: '#dropzone-panel',
        start: function(event, ui) {
            console.log("Dragging me.....");
        }
    });

    // Setup the dropzone
    //
    $("#dropzone-panel").droppable({
        drop: function(event, ui) {
            console.log("Drop Event Fired");

            // Get the original element id
            var id = ui.draggable.attr("id");

            // If this element is a copy already
            // then dont clone it.
            //
            if (id.indexOf("-copy-") >= 0) {
                console.log("This is a copy");
            } else {
               // This is the orginal, so clone and create a new id 
               var number_of_clones = document.querySelectorAll('*[id^="'+id+"-copy-" +'"]').length;
                console.log("found [" +number_of_clones +"] copies");
                var pos = ui.position;
                var $obj = ui.draggable.clone().attr("id", id+"-copy-"+number_of_clones);
                $obj.css({
                    position: 'absolute',
                    top: pos.top + "px",
                    left: pos.left + "px"
                });
                $obj.appendTo("#dropzone-panel");

                // Make the clone draggable
                MakeDraggable($obj);

            }
        }
    });