how do i change a draggable object in jquery

i have a list of objects that once a user clicks on i would like to change-

my code is

$(function() {

        $( ".ui开发者_如何学JAVA-state-default" ).draggable({
            revert: "invalid",
            zIndex: 2700

and the draggable item is this- (it has some css styling which i would want to change as well)

<li class="ui-state-default"><a href="#">North Right</a></li>

I would like to change the whole li to just an icon instead of the text and everything. reason being that im dragging items onto a map and having the text would hide certain parts

Like this?

I adapted the clone helper answer from Can't drop jquery ui helper on droppable