Issue
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});body {
background-color: silver;
font-family: Verdana, Georgia;
}
div.main {
margin-left: auto;
margin-right: auto;
width: 740px;
}
div.table {
display: table;
width: 740px;
}
div.td {
display: table-cell;
margin-top: 0;
width: 50%;
}
div.tr {
display: table-row;
}
ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}
ul.collection>li {}
ul#selection {
right: 0;
}
ul#source {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>
<body>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li class="draggable">Everything</li>
<li class="draggable">Nonfiction</li>
<li class="draggable">Fiction</li>
<li class="draggable">Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
</ul>
</div>
</div>
</div>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});
</script>
</div>
</body>
</html>This script is intended to make LI's draggable between two UL's. When this runs, the populated UL in the left table-cell-styled DIV is not flush up against the top of the table-styled DIV; it appears that its top is loosely (or exactly) aligned with the bottom of the empty table-cell to the right. The initial image, with a different background, is as follows:
If both UL's have at least one LI, then they are aligned flush towards the top as desired. If the last LI is dragged over, there can be a flicker effect. The desired flush appearance is:
I'd like to set things so that both UL's are at the top of what should be their simulated table-cell's whether they are populated or empty.
Solution
Vertically align the table-cells by using vertical-align: top on the div.td element. This will tell the table-cell to stick to the top.
See demo below:
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});body {
background-color: silver;
font-family: Verdana, Georgia;
}
div.main {
margin-left: auto;
margin-right: auto;
width: 740px;
}
div.table {
display: table;
width: 740px;
}
div.td {
display: table-cell;
margin-top: 0;
width: 50%;
vertical-align: top;
}
div.tr {
display: table-row;
}
ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}
ul.collection>li {}
ul#selection {
right: 0;
}
ul#source {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>
<body>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li class="draggable">Everything</li>
<li class="draggable">Nonfiction</li>
<li class="draggable">Fiction</li>
<li class="draggable">Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
</ul>
</div>
</div>
</div>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});
</script>
</div>
</body>
</html>Answered By - kukkuz Answer Checked By - Willingham (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.