Databases
StackOverflow2013
Postsdbo
POUsing JQuery Draggable sortable with div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing JQuery Draggable sortable with div
    primarykey
    data
    text
    <p>I am attempting to create a grid populated with 'widgets' that are draggable and sortable, ideally with some sort of placeholder dotted border of where they are going to go.</p> <p>Currently my HTML markup looks as follows:</p> <pre><code>&lt;div id="widget-1" class="box grid_8"&gt; &lt;div class="box-header"&gt; &lt;i class="fa fa-dropbox fa-fw"&gt;&lt;/i&gt; &lt;p&gt;New Orders&lt;/p&gt; &lt;/div&gt; &lt;div class="box-content"&gt; &lt;h1&gt;926&lt;/h1&gt; &lt;h2&gt;New &lt;strong&gt;Orders&lt;/strong&gt;&lt;/h2&gt; &lt;p class="grey-text"&gt;Need Your Attention&lt;/p&gt; &lt;a href="#" class="button"&gt;Take Me There&lt;/a&gt; &lt;/div&gt; &lt;div class="box-footer"&gt; &lt;a href=""&gt; &lt;i class="fa fa-cog fa-fw"&gt;&lt;/i&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>each box is split into header content and footer - all of equal height.</p> <p>I am trying to get it so I can use the header as a handle and move the entire box around, ideally showing a placeholder of its new position too.</p> <p>Below is the CSS for the boxes:</p> <pre><code>/* ========================================================================== Boxes ========================================================================== */ .box { margin-top:10px; border: 1px solid #E0E0CF; background-color:#fff; height:250px; width:386px; } .box-2{ margin-top:10px; border: 1px solid #E0E0CF; background-color:#fff; height:30px; } .box-static{ margin-top:10px; border: 1px solid #E0E0CF; background-color:#fff; height:100%; } .box-header{ border-bottom:1px solid #E0E0CF; height:30px; } .box-header i{ float:left; margin:6px; color:grey; } .box-header p{ float:right; margin:10px; font-size:8px; color:grey; } .box-header-static{ border-bottom:1px solid #E0E0CF; height:60px; } .box-header-static i{ float:left; margin:6px; color:grey; } .box-header-static h4{ float:left; margin:15px 0px 0px 0px; line-height: 30px; } .box-header-static p{ float:right; margin:10px; font-size:8px; color:grey; } .box-content{ width:100%; height:190px; overflow:hidden; text-align:center; } .box-content-static{ width:100%; height:100%; overflow:hidden; text-align:center; } .box-image{ width:100%; height:100%; } .box-content p{ position:relative; margin:11px 12px 13px 10px; } .box-footer{ height:30px; border-top:1px solid #E0E0CF; } .box-footer i{ height: 15px; float: right; border-left: 1px solid rgb(224, 224, 207); padding: 7px; position: relative; color: grey; } #widget-1 { } #widget-2 h3{ margin:10px; position:relative; } #widget-2 span{ } #widget-2 button{ } #widget-3{ } #widget-4{ } .top-left-heading p{ position: relative; margin:10px; } .top-left-heading p{ position: absolute; top: 150px; left: 434px; } </code></pre> <p>Js:</p> <pre><code>$(function() { $("#widget-1").sortable({containment: "parent"}); $("#widget-1").disableSelection(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdyatesupnorth
    1. USdyatesupnorth
    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. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COJS / jQuery too please...
      singulars
      1. POUsing JQuery Draggable sortable with div
      1. USlogic-unit
    2. COcurrently my Js is looknig very much like the documentations, i have updated my code to reflect this
      singulars
      1. POUsing JQuery Draggable sortable with div
      1. USdyatesupnorth
    3. COyoure applying sortable to the `sortable` div which you dont have in your code. Dont copy the documentation directly you need a basic understanding of jQuery to use the plugin.
      singulars
      1. POUsing JQuery Draggable sortable with div
      1. USKierchon
 

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