Question

Hello everybody and Merry Christmas,
I’ve created some li elements in a news website, just as follows:

<ul class="other">
<li id="eco">
//news feed
</li>
<li id="tech">
//news feed
</li>
<li id="art">
//news feed
</li>
<li id="opin">
//news feed
</li>
</ul>

css:

.other{
padding:0;
margin:0;
width:715px;
list-style:none;
font-family:tahoma;
margin-bottom:10px;
}

.other li{
text-align:right;
width:300px;
height:300px;
float:left;
margin-top:10px;
margin-left:20px;
padding:10px;
}

and I’ve written a jquery code to drag these elements:

$(document).ready(function(){

$('#others li').draggable({
containment:'parent',
revert:'invalid',
opacity:'0.91',
cursor:'crosshair'
});

});

As you can see (if you already programmed with jquery) this code drags the element, and then the

returns to its initial position when mouse released(while shifting opacity)… well, I just want to know how can change places when the dragged elements reaches the x and y position of a second element.

(note: the elements are draggable in both x and y directions)

thank you

Answer 1

I believe what you need is sortable: example here
Please analyze the demo examples like the portlets to better understand how it’s function.