网上似乎有很多关于这个问题的讨论，但没有解决方案对我有帮助。问题是在FF和IE上我有可拖动的辅助克隆位置偏移量和页面滚动像素数。我在身体上试过“溢出：自动”，我也检查了父母是否有位置：亲属。对我来说似乎很好。也许我只需要一双新眼睛来看我的代码。这是一个小提琴http://jsfiddle.net/zEb7y/3/。
最小化页面非常重要，这样您就可以在“结果”部分滚动。首先尝试拖动一个容器，页面滚动到顶部，然后向下滚动一下，你会看到偏移量。
由于
HTML：
<div id="productView" class="tiles">
<div class="productList" id="productList">
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="A1" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="A2" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="A3" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
<div class="product" data-regnumber="LO12NWU">
<a id="ctl00_ctl00_ContentPlaceHolderContent_ContentPlaceHolderContent_ListViewVehicles_ctrl0_Hyperlink_VehicleDetails" href="#">
<div class="productImage">
<div class="shortListOverlay">
<div class="buttonHolder add">
<span>Drag to Shortlist</span>
</div>
</div>
</div>
<div class="productDetails" style="height: 105px;">
</div>
</a>
</div>
</div>
</div>
</div>
<div class="shortList">
<div class="inner">
<header>
<h3>Shortlist</h3>
<span class="productCount">0</span>
<a href="#" class="viewAll">View all</a>
<a href="#" class="visibilityHandler">X</a>
</header>
<div class="thumbnailContainer">
<a href="#" class="prev thumbNav"><</a>
<div class="productContainer">
<div class="products"></div>
</div>
<a href="#" class="next thumbNav">></a>
</div>
</div>
</div>
CSS：
.products {
padding: 0 20px 20px 0;
}
@media screen and (max-width: 760px) {
.products {
padding: 80px 10px 0 0;
margin-left: 10px; } }
.products .productView {
overflow: hidden; }
.products .productView .noResults {
padding: 40px 0;
text-align: center; }
.products .title {
margin: 0 0 20px; }
@media screen and (max-width: 760px) {
.products .title {
text-align: right;
margin: 10px 0 10px; } }
.products .subTitle {
margin-top: 0;
font-family: "Segoe UI", Arial, Helvetica, Sans Serif;
font-size: 16px; }
.products .productList {
margin: 0;
padding: 0;
list-style: none;
width: 100%; }
.products .product {
width: 24.9%;
margin: 0 0 5px;
float: left;
list-style: none; }
@media screen and (max-width: 2000px) {
.products .product {
width: 20%; } }
@media screen and (max-width: 1366px) {
.products .product {
width: 25%; } }
@media screen and (max-width: 1200px) {
.products .product {
width: 33%; } }
@media screen and (max-width: 600px) {
.products .product {
width: 50%; } }
.products .product .finance.loading {
background: white url(/Images/Common/Interface/loader_inline_grey.gif) no-repeat center center;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px; }
.products .product .finance.loading * {
display: none; }
.products .product a {
display: block;
color: #333333;
background: #ccc;
margin-right: 5px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out; }
.products .product a .productImage {
position: relative; }
.products .product a .productImage img {
max-width: 100%;
width: 100%;
display: block;
border: 0; }
.products .product a .productImage .shortListOverlay {
width: 100%;
text-align: center;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
cursor: pointer; }
.products .product a .productImage .shortListOverlay span {
color: #fff; }
.products .product a .productImage .shortListOverlay .buttonHolder {
width: 90%;
padding: 5px 5%;
background: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 8 */
filter: alpha(opacity=0);
/* IE 5-7 */
opacity: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out; }
@media screen and (max-width: 460px) {
.products .product a .productImage .shortListOverlay .buttonHolder {
font-size: 10px; } }
@media screen and (max-width: 1020px) {
.products .product a .productImage .shortListOverlay .buttonHolder {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 8 */
filter: alpha(opacity=80);
/* IE 5-7 */
opacity: 0.8; }
.products .product a .productImage .shortListOverlay .buttonHolder .icon {
visibility: visible; } }
.products .product a .productImage .shortListOverlay .buttonHolder.remove {
display: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 8 */
filter: alpha(opacity=80);
/* IE 5-7 */
opacity: 0.8; }
.products .product a .productDetails {
padding: 5px;
overflow: hidden; }
.products .product a .productDetails h1 {
font: bold 16px "Segoe UI", "Helvetica Neue", Arial, sans-serif;
margin: 0; }
.products .product a .productDetails h1 .makeModel {
display: block; }
.products .product a .productDetails h1 .derivative {
color: #555;
font-size: 90%; }
@media screen and (max-width: 1366px) {
.products .product a .productDetails h1 {
font-weight: bold;
font-size: 14px; } }
@media screen and (max-width: 960px) {
.products .product a .productDetails h1 {
font-weight: bold;
font-size: 12px; } }
.products .product a .productDetails p {
margin: 0;
font: normal 14px "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
@media screen and (max-width: 960px) {
.products .product a .productDetails p {
font-size: 12px; } }
.products .product a .productDetails h3 {
margin: 0 5px 0 0;
float: left;
font: bold 14px "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
@media screen and (max-width: 960px) {
.products .product a .productDetails h3 {
font-size: 12px;
margin: 0 3px 0 0; } }
.products .product a .productDetails h4 {
margin: 0;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
@media screen and (max-width: 960px) {
.products .product a .productDetails h4 {
font-size: 12px; } }
.products .product a:hover {
background: #29a6ee;
color: #fff; }
.products .product a:hover h3 {
color: #fff; }
.products .product a:hover .productDetails h1 .derivative {
color: #fff; }
.products .product a:hover .shortListOverlay .add {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 8 */
filter: alpha(opacity=80);
/* IE 5-7 */
opacity: 0.8; }
.products .product a .extendedFeatures {
display: none; }
@media screen and (max-width: 960px) {
.products .product a {
font-size: 12px; } }
.shortList {
width: 100%;
left: 0;
bottom: -100%;
position: fixed;
z-index: 10000;
background: whitesmoke; }
.shortList .inner header {
padding: 3px 10px;
background: black;
overflow: hidden; }
.shortList .inner header h3 {
margin: 0 20px 0 0;
font-weight: bold;
dispaly: inline-block;
color: white;
float: left; }
.shortList .inner header .productCount {
color: white;
padding: 3px 10px;
margin: 0 20px 0 0;
float: left;
background: #262626; }
.shortList .inner header .viewAll {
color: white;
padding: 3px 5px;
float: left;
display: none; }
.shortList .inner header .visibilityHandler {
width: 16px;
height: 26px;
float: right;
display: none;
text-indent: -9999px;
background: url(/Images/Common/Icons/icon_gallery_close.png) no-repeat center center; }
.shortList .inner .thumbnailContainer {
position: relative;
padding: 5px 35px;
overflow: hidden; }
.shortList .inner .thumbnailContainer .thumbNav {
width: 25px;
display: block;
text-indent: -9999px;
margin-top: -27px;
padding: 18px 0 17px;
position: absolute; }
.shortList .inner .thumbnailContainer .thumbNav.prev {
top: 50%;
left: 5px;
background: gray url(/Images/Common/Icons/icon_gallery_arrow_left.png) no-repeat center center; }
.shortList .inner .thumbnailContainer .thumbNav.next {
top: 50%;
right: 5px;
background: gray url(/Images/Common/Icons/icon_gallery_arrow_right.png) no-repeat center center; }
.shortList .inner .thumbnailContainer .productContainer {
overflow: hidden;
position: relative; }
.shortList .inner .thumbnailContainer .productContainer.ui-state-default {
border: none; }
.shortList .inner .thumbnailContainer .productContainer .products {
height: 54px;
margin-left: 0;
padding: 0; }
.shortList .inner .thumbnailContainer .productContainer .products .product {
width: 145px;
margin: 0 5px 0 0;
float: left; }
.shortList .inner .thumbnailContainer .productContainer .products .product a {
margin: 0;
cursor: pointer; }
.shortList .inner .thumbnailContainer .productContainer .products .product a:hover .productDetails h1 {
color: white; }
.shortList .inner .thumbnailContainer .productContainer .products .product a:hover .productDetails p {
color: white; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productImage {
width: 65px;
float: left; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productImage img {
border: 0 none;
display: block;
max-width: 100%;
width: 100%; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails {
height: 43px;
padding: 3px 5px;
margin-left: 65px; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails h1 {
font-size: 12px;
font-weight: bold;
line-height: 14px;
color: black;
margin: 0 0 3px 0; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails h1 .derivative {
display: none; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails p {
display: none; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails .price {
font-size: 12px; }
@media screen and (max-width: 700px) {
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails .price {
font-size: 10px; } }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails .finance {
display: none; }
.shortList .inner .thumbnailContainer .productContainer .products .product .productDetails h4 {
display: none; }
.shortList .inner .thumbnailContainer .productContainer .products .product .extendedFeatures {
display: none; }
.shortList .inner .thumbnailContainer .productContainer .products .product .controls {
position: absolute;
top: 10px;
left: 2px; }
.shortList .inner .thumbnailContainer .productContainer .products .product .controls .button {
font-size: 12px;
color: white;
padding: 5px 7px;
border: none;
margin-top: 5px;
background: #cd3939; }
JS：
var thisObj = this,
shortList = jQuery('.shortList'),
productList = jQuery('.productList'),
product = productList.find('.product'),
shortListOverlay = product.find('.shortListOverlay'),
productContainer = shortList.find('.productContainer'),
shortlistedProducts = productContainer.find('.products'),
productArray = [],
viewAll = shortList.find('header').find('.viewAll'),
visibilityHandler = shortList.find('header').find('.visibilityHandler'),
visibilityState = {},
currentThumb = 0,
productCount = shortList.find('.productCount'),
controls = productContainer.prev().add(productContainer.next()),
productsInLine = 0;
product.draggable({
appendTo: 'body',
helper: 'clone',
addClasses: false,
scroll: false
});
productContainer.droppable({
tolerance: 'touch',
activeClass: "ui-state-default",
activate: function (event, ui) {
shortList
.animate({
'bottom': '0'
}, 200, function () {
visibilityHandler.fadeIn(200);
});
ui.helper.find('.productDetails').removeAttr('style');
},
deactivate: function (event, ui) {
var target = jQuery(this).find('.products');
if (!target.children('.product').length) {
shortList
.animate({
'bottom': '-' + shortList.outerHeight()
});
}
},
drop: function (event, ui) {
var target = jQuery(this).find('.products'),
targetLength = target.children('.product').length;
shortList.addClass('visible');
ui.draggable.draggable("disable");
}
});