Make the dialog control from extension library draggable again

Draggable dialog

xsp:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xp:this.resources>
		<xp:script src="/functions.js" clientSide="true" />
		<xp:styleSheet href="/bootstrap.css" />
	</xp:this.resources>
	<div class="panel">
		<xp:button value="Show me the modal..." id="button1"
			styleClass="btn btn-info">
			<xp:eventHandler event="onclick" submit="true"
				refreshMode="complete">
				<xp:this.action><![CDATA[#{javascript:var c = getComponent("dialog1")
c.show()}]]></xp:this.action>
			</xp:eventHandler>
		</xp:button>
	</div>
	<xe:dialog id="dialog1" title="Draggable modal">
		<xe:this.onShow>
    <![CDATA[
        x$("#{id:dialog1}").removeClass("xsp-responsive-modal").addClass("draggable-responsive-modal");
    ]]>
		</xe:this.onShow>
		<div class="alert alert-info">
			<strong>Drag me, Baby!</strong>
			&#160; Drag! Drag! Drag!
		</div>
	</xe:dialog>
</xp:view>

css:
.draggable-responsive-modal { /* copy of .xsp-responsive-modal with important removed from left and top to enable dragging in xe:dialog */
    display: block;
    width: auto;
    left: 0;
    top: 0;
    z-index: 1050 !important;
}