StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I fixed the fiddle, I hope it does what you wanted ! You can try it here : <a href="http://jsfiddle.net/23vR5/" rel="noreferrer"><strong>DEMO</strong></a></p> <h2><strong>What I've changed :</strong></h2> <p><strong>JQuery :</strong></p> <pre><code>$(function() { $( ".slikezamenjanje" ).draggable({ revert: 'invalid', helper: 'clone', start: function(){ //hide original when showing clone $(this).hide(); }, stop: function(){ //show original when hiding clone $(this).show(); } }); $( "#zidomotac" ).droppable({ //set container droppable drop: function( event, ui ) { //on drop ui.draggable.css({ // set absolute position of dropped object top: ui.position.top, left: ui.position.left }).appendTo('#zidomotac'); //append to container } }); }); </code></pre> <p>I added a droppable state on your container, so you will be able to drag and drop inside. Then I used the <code>drop</code> event which allows me to get the element (<code>ui.draggable</code>) and the position (<code>ui.position</code>) of the dropped element.</p> <p>So I set the absolute position with <code>.css()</code> and then append to the container with <code>.appendTo()</code>.</p> <p>For <code>.draggable()</code>, I just added start and stop events to show/hide original element when the clone is hidden/shown.</p> <p><strong>CSS :</strong></p> <pre><code>/* Custom style for dropped element */ #zidomotac .slikezamenjanje { position: absolute; } </code></pre> <p>Just added this class to apply style for dropped element.</p> <p>Hope I helped you ;)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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