Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Note: For both drag and resize, you'll have to make separate cases for certain different types of elements. Take a look in <strong><a href="http://jsfiddle.net/vPyjc/" rel="nofollow noreferrer">the example I provide later on</a></strong> that handles the dragging of both ellipses and rectangles in the same set of functions.</p> <hr> <p>To make an element dragable you use:</p> <pre><code>element.drag(move, start, up); </code></pre> <p>The three arguments are references to the functions that handle moving (dragging), starting (mouse down), and the stopping (mouseup).</p> <p>For example to make a draggable circle (from the documentation):</p> <pre><code>window.onload = function() { var R = Raphael("canvas", 500, 500); var c = R.circle(100, 100, 50).attr({ fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5 }); var start = function () { // storing original coordinates this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.attr({opacity: 1}); }, move = function (dx, dy) { // move will be called with dx and dy this.attr({cx: this.ox + dx, cy: this.oy + dy}); }, up = function () { // restoring state this.attr({opacity: .5}); }; c.drag(move, start, up); };​ </code></pre> <h2><strong><a href="http://jsfiddle.net/aEcGY/" rel="nofollow noreferrer">jsFiddle example</a></strong></h2> <p><br/></p> <p>In the above example, the <code>ox</code> and <code>oy</code> properties are tacked on to the element to keep track of its location, and these properties in conjunction with <code>dx</code> and <code>dy</code> are used to change the location of the element as it's being dragged.</p> <p><strong><a href="http://jsfiddle.net/vPyjc/" rel="nofollow noreferrer">A more complicated drag and drop</a></strong> to answer <strong><a href="https://stackoverflow.com/questions/3679436/how-can-i-combine-objects-in-the-raphael-javascript-library/3875603#3875603">this question</a></strong>.</p> <p>To make an object resizeable, you would simply create a second set of drag and drop methods for the resizer and just adjust the target elements <code>height</code> and <code>width</code> based on dragging the resizer.</p> <p>Here's a full of one drag and drop and resizeable box I wrote up:</p> <h2><strong><a href="http://jsfiddle.net/tmkfs/" rel="nofollow noreferrer">jsFiddle example of drag and drop and resizeable box</a></strong></h2> <pre><code>window.onload = function() { var R = Raphael("canvas", 500, 500), c = R.rect(100, 100, 100, 100).attr({ fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5, cursor: "move" }), s = R.rect(180, 180, 20, 20).attr({ fill: "hsb(.8, .5, .5)", stroke: "none", opacity: .5 }), // start, move, and up are the drag functions start = function () { // storing original coordinates this.ox = this.attr("x"); this.oy = this.attr("y"); this.attr({opacity: 1}); this.sizer.ox = this.sizer.attr("x"); this.sizer.oy = this.sizer.attr("y"); this.sizer.attr({opacity: 1}); }, move = function (dx, dy) { // move will be called with dx and dy this.attr({x: this.ox + dx, y: this.oy + dy}); this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy}); }, up = function () { // restoring state this.attr({opacity: .5}); this.sizer.attr({opacity: .5}); }, rstart = function () { // storing original coordinates this.ox = this.attr("x"); this.oy = this.attr("y"); this.box.ow = this.box.attr("width"); this.box.oh = this.box.attr("height"); }, rmove = function (dx, dy) { // move will be called with dx and dy this.attr({x: this.ox + dx, y: this.oy + dy}); this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy}); }; // rstart and rmove are the resize functions; c.drag(move, start, up); c.sizer = s; s.drag(rmove, rstart); s.box = c; };​ </code></pre> <p>The included event handlers (you can use more of course in conjunction with <strong><a href="http://raphaeljs.com/reference.html#node" rel="nofollow noreferrer"><code>.node()</code></a></strong>) and the drag and drop description is at the bottom of the page <strong><a href="http://raphaeljs.com/reference.html" rel="nofollow noreferrer">in the documentation</a></strong>.</p> <p>You would simply make one Raphael canvas, and then each item would be a different element. Just assign them to variables so you can handle them, like in the example above ( <code>c</code> was used to refer to the created circle element ).</p> <p>In response to comments here is a simple drag and drop + resize able circle. The trick is that circles use the attributes <code>cx</code> and <code>cy</code> for positioning and <code>r</code> for size. The mechanics are pretty much the same... an ellipse would be slightly more complicate, but again it's just a question of working with the right attributes.</p> <h2><a href="http://jsfiddle.net/Pxbrf/" rel="nofollow noreferrer">jsFiddle example of drag and drop and resizeable circle</a></h2> <pre><code>window.onload = function() { var R = Raphael("canvas", 500, 500), c = R.circle(100, 100, 50).attr({ fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5 }), s = R.circle(125, 125, 15).attr({ fill: "hsb(.8, .5, .5)", stroke: "none", opacity: .5 }); var start = function () { // storing original coordinates this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.sizer.ox = this.sizer.attr("cx"); this.sizer.oy = this.sizer.attr("cy") this.attr({opacity: 1}); this.sizer.attr({opacity: 1}); }, move = function (dx, dy) { // move will be called with dx and dy this.attr({cx: this.ox + dx, cy: this.oy + dy}); this.sizer.attr({cx: this.sizer.ox + dx, cy: this.sizer.oy + dy}); }, up = function () { // restoring state this.attr({opacity: .5}); this.sizer.attr({opacity: .5}); }, rstart = function() { // storing original coordinates this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.big.or = this.big.attr("r"); }, rmove = function (dx, dy) { // move will be called with dx and dy this.attr({cx: this.ox + dy, cy: this.oy + dy}); this.big.attr({r: this.big.or + Math.sqrt(2*dy*dy)}); }; c.drag(move, start, up); c.sizer = s; s.drag(rmove, rstart); s.big = c; }; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. PODraggables and Resizables in SVG
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USPeter Ajtai
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHi, Great examples above, but I'm looking to extend it a little further. I would like to be able to use re-sizable with circles. I have managed to get the rect's working but struggling with this. I think my issue stems from the rmove method, as when I set this.box width and height there is no alternative for circles. Any ideas, or any possible tutorials you know of. Thanks.
      singulars
      1. PO
      1. USAdam Holmes
    2. CO@Adam - For circles and ellipses, you just use the center point, `cx` and `cy` and the radius. Here is an example of how to handle both rectangles and ellipses for draggging ==> http://jsfiddle.net/vPyjc/ (look at the "dragger" function, it uses if `shapes[ind].type == "rect" ` to check for the type of shape and handles each one separately. ------ This means you'll essentially have to write separate code for handling the dragging and resisizing of ellipses (using radius and center coords instead of the box).
      singulars
      1. PO
      1. USPeter Ajtai
    3. COSorry, maybe I didnt make myself clear. I dont have any issues dragging the shapes around. It is the resizing that has issues. I can resize rects like in your example above, but I cannot resize circles/elipses using a draggable shape, even though I am selecting the correct attributes. I think the issue is with the .box as there is no width and height attribute for circles.
      singulars
      1. PO
      1. USAdam Holmes
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload