JSFiddle - React, Tailwind, and code Playground

by tayhaithian

HTML

<div style="width=100px;hegiht:100px;border: 1px Solid Red;" class="claro"> 
    <div dojoType="dojox.widget.Portlet" title="First Portlet" id="moveable1">
        <div dojoType="dojox.widget.PortletSettings">
            Put whatever settings you like in here
        </div>
        <div>
            Drag me around by clicking on my title bar.
        </div>
    </div>
    <div dojoType="dojox.widget.Portlet" title="Second Portlet" id="moveable2" >
        <div dojoType="dojox.widget.PortletSettings">
            Put whatever settings you like in here
        </div>
        <div>
            Eric Portlet drag as you want.
        </div>
    </div>
    
    
</div>

CSS

@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Portlet/Portlet.css";
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/layout/resources/GridContainer.css";
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Calendar/Calendar.css";
            .dndDropIndicator { border: 2px dashed #99BBE8; cursor:default; margin-bottom:5px;
            }

JavaScript

dojo.require("dojo.dnd.move");
dojo.require("dojox.widget.Portlet");


var move1 = new dojo.dnd.move.parentConstrainedMoveable("moveable1", {
    area: "margin",
    within: true
});
var move2 = new dojo.dnd.move.parentConstrainedMoveable("moveable2", {
    area: "margin",
    within: true
});