draggable/movable SVG Rectangle

Develop and Deploy Cross-Browser Web Apps .

draggable/movable SVG Rectangle

Postby sedrok » Wed Jun 18, 2014 9:33 am

Can be used for dynamic workflow building/editing like in attlassian JIRA.

If you can improve this code please post here or email me.

// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
// To initialize instance(e.g. properties)
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};

append((new xui.UI.SVGPaper())

host.ctl_svgpaper124.append((new xui.svg.rectComb())
.setAttr({"KEY":{"stroke":"#004A7F", "fill":"90-#5198D3-#A1C8F6", "width":120, "height":40, "x":130, "y":60}, "TEXT":{"fill":"#fff", "font-size":"12px", "font-weight":"bold", "text":"Process"}})

host.ctl_svgpaper124.append((new xui.svg.pathComb())
.setAttr({"KEY":{"stroke":"#004A7F", "fill":"90-#5198D3-#A1C8F6", "path":"M,140,240L,162,200L,250,200L,228,240Z"}, "TEXT":{"fill":"#fff", "font-size":"12px", "font-weight":"bold", "text":"Data"}})

host.ctl_svgpaper124.append((new xui.svg.connector())
.setAttr({"KEY":{"path":"M,190,100L,195,200", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})

return children;
// ]]Code created by CrossUI RAD Tools
// Give a chance to load other com
iniExComs : function(com, threadid){
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
// This instance's events
events : {"onRender":"_com_onrender"},
_com_onrender:function (com,threadid){
var ns = this;
window.$ns = ns;

dragType : 'icon',
dragIcon : 'http://www.vs.gs/tools/cursors/moveCursor.png'
var n_l = xui.Event.getPos(e).left - $ns.ctl_rectcomb251.getParent().getLeft();
var n_t = xui.Event.getPos(e).top - $ns.ctl_rectcomb251.getParent().getTop();



1231efwf.jpg (8.13 KiB) Viewed 4839 times
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests