Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I had to change the HTML and CSS but I think this achieves the effect you were after.</p> <p>Here's a hosted demo: <a href="http://jsbin.com/erigu" rel="nofollow noreferrer">http://jsbin.com/erigu</a> (Editable via <a href="http://jsbin.com/erigu/edit" rel="nofollow noreferrer">http://jsbin.com/erigu/edit</a>)</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;style type="text/css" media="screen"&gt; * { margin: 0; padding: 0; } #numbers&gt;div, #sortables&gt;div { width: 110px; height: 100px; float: left; border: 1px solid #C0C0C0; } #numbers&gt;div { padding-bottom: 20px; font: bold 12px Arial, Helvetica, sans-serif; color: #808080; background-color: #F8F8F8; } #sortables&gt;div { padding-top: 20px; text-align: center; color: black; } #sortables { position: absolute; left: 0px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="numbers"&gt; &lt;div&gt;1&lt;/div&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;3&lt;/div&gt; &lt;div&gt;4&lt;/div&gt; &lt;/div&gt; &lt;div id="sortables"&gt; &lt;div&gt;Test A&lt;/div&gt; &lt;div&gt;Test B&lt;/div&gt; &lt;div&gt;Test C&lt;/div&gt; &lt;div&gt;Test D&lt;/div&gt; &lt;/div&gt; &lt;script&gt; $(function(){ $('#sortables').sortable({ /* The helper option allows you to customize the dragged element. in this case we are adding a background. */ helper: function(evt, el){ return el.clone().css({background:'#F8F8F8'}); } }); }); &lt;/script&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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      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