Databases
StackOverflow2013
Postsdbo
POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
    primarykey
    data
    text
    <p>I've been piecing together a project of mine, and one of the key aspects will be a draggable "canvas"--an area in which users can create/destroy/drag-n-drop child elements. I've created a diagram below:</p> <p><img src="https://i.stack.imgur.com/Z6uSW.jpg" alt="Canvas drag diagram"></p> <p><strong>The Canvas starts the user somewhere in the middle, allowing them to click-and-drag to explore the edges; the content is only viewable within the "viewable canvas" window.</strong></p> <p>Seeing as the user-created elements will be draggable as well, I was thinking about maybe restricting the 'canvas drag' to only when the user presses and holds space bar... but before I get to that, I need help brainstorming ways to accomplish the 'canvas drag.'</p> <p>I'm wondering if some clever implementation of the Jquery UI draggable could also be used for the canvas, and not just its child elements. Thoughts?</p> <p>Thanks!</p> <p><strong>Edit:</strong></p> <p>So in an attempt to not "think so hard," I've outlined an approach that appears 'too simple to be true.' I took the same premise from above, but the 'canvas' is a draggable div inside a proportionately larger container:</p> <p><img src="https://i.stack.imgur.com/CnPe4.jpg" alt="Draggable diagram"></p> <p>Does anyone have any experience with <a href="https://stackoverflow.com/questions/2185412/draggable-nested-inside-draggable-drags-both-when-dragging-child-in-ie">nested draggables</a> (this guy had problems,) and/or draggables larger than their viewing space? This model needs to work, inasmuch as the draggable child elements within the canvas work as well.</p> <p>Thanks!</p> <p>. . .</p> <p><strong>Update:</strong></p> <p>Using <a href="http://wayfarerweb.com/jquery/plugins/mapbox/" rel="nofollow noreferrer">Mapbox</a> and <a href="http://jqueryui.com/demos/draggable/" rel="nofollow noreferrer">jQuery UI Draggable</a>, I've successfully created a draggable 'canvas' with a draggable 'node.' The problem is that dragging the 'node' drags the 'canvas' as well--creating an awesome, but unwanted (at least at this stage) parallax effect.</p> <p>Jquery :</p> <pre><code>$(function() { $('#viewport').mapbox(); $('.node').draggable({containment:"#canvas", scroll:false}); }); </code></pre> <p>HTML :</p> <pre><code>&lt;div id="viewport"&gt; &lt;div id="canvas" style="background: url('image/1k_square.jpg') no-repeat; width: 1000px; height: 1000px;"&gt; &lt;div class="node"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--viewport--&gt; </code></pre> <p>CSS:</p> <pre><code>.node { position : relative; margin : 0 auto; background : rgba(255,255,255,.2); width : 118px; height : 118px; z-index : 100; border : 1px dotted black; } #viewport { width: 520px; height: 520px; margin: 20px auto; overflow: hidden; } </code></pre> <p>I've already tried using a stop propagation:</p> <p><code>$('.node').click(function(e){ e.stopPropagation();});</code></p> <p>but that didn't do anything. A little help? :D</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USjlmakes
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
      1. USBrad Christie
      1. VTFavorite
    3. VO
      singulars
      1. POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
      1. USFlashXSFX
      1. VTFavorite
    1. COare you saying the user can draw a shape and then drag it around?
      singulars
      1. POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
      1. USZevan
    2. COUsers don't draw shapes, they 'create' them--think of it like creating thumbtack notes on a corkboard... and then being able to drag the corkboard around. (The user will also be able to drag the thumbtack notes around as well, if that's what you're asking.)
      singulars
      1. POA way to create a click-and-drag "canvas" user-area with Javascript and Jquery?
      1. USjlmakes
 

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