Databases
StackOverflow2013
Postsdbo
POJquery All divs move but need just one to move
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery All divs move but need just one to move
    primarykey
    data
    text
    <p>I have this following code below. It has div within one bigger div. I only want the "#set" div to move, not the other divs. But right now the user can move anything that's within a div. How can I make it only move the big div "set"?</p> <p>Header:</p> <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;style&gt; #set { clear:both; float:left; width: 368px;} p { clear:both; margin:0; padding:1em 0; } &lt;/style&gt; &lt;script&gt; $(function() { $( "#set div" ).draggable({ stack: "#set div", stop: function(event, ui) { var pos_x = ui.offset.left; var pos_y = ui.offset.top; var need = ui.helper.data("need"); console.log(pos_x); console.log(pos_y); console.log(need); //Do the ajax call to the server $.ajax({ type: "POST", url: "updatecoords.php", data: { x: pos_x, y: pos_y, need_id: need} }) } }); }); &lt;/script&gt; </code></pre> <p><br><br><br> Body:</p> <pre><code>&lt;div id="set"&gt; &lt;? $getcoords = mysql_query("SELECT * FROM coords WHERE needid=6"); $rows = mysql_fetch_assoc($getcoords); $x = $rows['x']; $y = $rows['y']; echo " &lt;div style='width: 175px; height: 350px; padding: 0.5em; float: left; margin: 0 10px 10px 0; background: white; position:fixed;left:".$x."px; top:".$y."px;' data-need='6' class='column'&gt; &lt;div class='portlet'&gt; &lt;div class='portlet-header'&gt;Contacts&lt;/div&gt; &lt;div class='portlet-content'&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit&lt;/div&gt; &lt;/div&gt; &lt;div class='portlet'&gt; &lt;div class='portlet-header'&gt;Notes&lt;/div&gt; &lt;div class='portlet-content'&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; "; ?&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USderekshull
    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. COI think maybe there is something obvious getting missed here. Based on my understanding of your question, @arun-p-johnny's answer is right. Perhaps your question is unclear? A test for you to try, just to make sure things are working properly: make just '.portlet-content' draggable, and see what happens.
      singulars
      1. POJquery All divs move but need just one to move
      1. USdgo
    2. COwhen I change it to: `$( "#portlet" ).draggable({ stack: "#portlet",` it drags the first portlet and lets me change it but not the second. The "#set" div is the big div around the other divs. I want the code to move only it. But it's moving all the divs in the code from my original code.
      singulars
      1. POJquery All divs move but need just one to move
      1. USderekshull
    3. COThis should do it: `$('#set').not($('#set div')).draggable()`
      singulars
      1. POJquery All divs move but need just one to move
      1. USdgo
 

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