Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Thanks for the fast replies!</p> <p>Your solutions looks good but the first one throws some errors when changing position 1 and 2. The second one is not quite there. But they help alot!</p> <p>I have tried to make some code that I think is a step in the right direction. What do you think?</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /&gt; &lt;title&gt;Drag drop 1&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $(".item").draggable({ // Elements cannot go outside #container containment: 'parent', // Make sure the element can only be dropped in a grid grid: [150,150], start: function(event, ui) { // Make sure picture always are on top when dragged (z-index) $(this).css({'z-index' : '100'}); // Show start dragged position var Startpos = $(this).position(); $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top); }, stop: function(event, ui) { // Revert to default layer position when dropped (z-index) $(this).css({'z-index' : '10'}); // Show dropped position var Stoppos = $(this).position(); $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); } }); }); &lt;/script&gt; &lt;style&gt; #container { width:480px; border:1px solid #000; } .item { position:relative; width:150px; height:150px; z-index:10; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" /&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;div id="start"&gt;Waiting...&lt;/div&gt; &lt;div id="stop"&gt;Waiting...&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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