I have got some problem on JqueryUI sortable portlet. I have 2
sortable areas. When I try to drag 1 element from area1 to area2, the
placeholder goes on top of area2 whether there are elements on area2.
It should be placed at the bottom of all elements in area2. I am
attaching the code. Please help me out.
HTML:
<style>
#leftContent {
width: 500px;
display: table;
}
#tableRow {
display: table-row;
}
.column {
width: 250px;
vertical-align:top;
background-color:bisque;
display: table-cell;
}
.ui-sortable-placeholder {
background: #E0E9EF;
border-color: #E0E9EF;
visibility: visible !important;
}
.ui-sortable-placeholder * {
visibility: hidden;
}
</style>
<script>
$(document).ready(
function()
{
$(".column").sortable({
opacity: 0.6,
handle: '.portlet-header',
forcePlaceholderSize: true,
revert: true,
connectWith: '.column',
tolerance: 'pointer'
});
$(".portlet-header").mouseover(function() {
$(this).css("cursor", "move");
});
}
);
</script>
<div id="leftContent" class="floatLeft">
<div id="tableRow">
<!--area1-->
<div class="area1">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<!--area2-->
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</
div>
<div class="portlet-content">Lorem ipsum
dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
