<div>I need to build a feature for an application that allows users to design things like business cards via a simple drag-n-drop interface. This means at a minimum, being able to add text fields, lines, and images to an area on the page. I'm envisioning features such as "show grid", "background image", "background color", etc.</div> <div> </div><div>Does anyone know of anything similar? I've been searching and can't locate anything. It doesn't even have to be specific to this -- it could be a floor plan designer, a powerpoint-like layout tool, a report builder, etc.</div> <div> </div><div>I fully expect to have to build this myself, probably with UI components like drag, drop, resize, dialog, etc. But I am interested to look at what else is out there that might be similar.</div><div> </div><div>Also, I've been looking into both HTML5 canvas and SVG (using Raphael) as part of this. Any thoughts on using these?</div><div> </div><div>Thanks!</div>
I sent this question earlier, but it never showed up on the list that I could tell. Sorry if its a duplicate. Can someone tell me if I change the handle on a resizable to be just 's', if I should actually see a handle on the south side of the div? Everything works properly when I do this -- the mouse cursor changes to an up/down arrow, I can resize the div only up/down from the bottom edge, etc. The SW handle image goes away, which makes sense. But there is no visual icon or handle added to the bottom of the div. Is this the way it works? I've downloaded jquery yesterday with all components and the "start" theme in it. Then I copied the resizable sample, and just changed it to use handles: 's'. See sample code below. Thanks! Tauren <html> <head> <link type="text/css" href="jquery-ui-1.7.1/css/start/jquery- ui-1.7.1.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-ui-1.7.1/js/ jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1/js/jquery- ui-1.7.1.custom.min.js"></script> <style type="text/css"> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 1px dotted gray; } </style> <script type="text/javascript"> $(function() { $("#resizable").resizable({ animate: true, handles: 's' }); }); </script> </head> <body> <div class="demo"> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Animate</h3> </div> </div><!-- End demo --> </body> </html>
Can someone tell me if I change the handle on a resizable to be just 's', if I should actually see a handle on the south side of the div? Everything works properly when I do this -- the mouse cursor changes to an up/down arrow, I can resize the div only up/down from the bottom edge, etc. The SW handle image goes away, which makes sense. But there is no visual icon or handle added to the bottom of the div. Is this the way it works? I've downloaded jquery yesterday with all components and the "start" theme in it. Then I copied the resizable sample, and just changed it to use handles: 's'. See sample code below. Thanks! Tauren <html> <head> <link type="text/css" href="jquery-ui-1.7.1/css/start/jquery- ui-1.7.1.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-ui-1.7.1/js/ jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1/js/jquery- ui-1.7.1.custom.min.js"></script> <style type="text/css"> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 1px dotted gray; } </style> <script type="text/javascript"> $(function() { $("#resizable").resizable({ animate: true, handles: 's' }); }); </script> </head> <body> <div class="demo"> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Animate</h3> </div> </div><!-- End demo --> </body> </html>