我有多个拖放区域，如下所示：
请注意，div 在悬停时有一个用 CSS 完成的翻转动画。
<div class="row">
<div class="col-xs-5">
<div class="box-flip-container horizontal dimension320x50">
<div class="flipper height-25" ngf-drop ngf-select ngf-change="upload($files, '320x50')" ngf-multiple="false" ngf-allow-dir="false" accept="image/*" ngf-drag-over-class="dragover">
<div class="banner-box flip-front">
<div class="sponsor-banner-text relative-box height-25">320x50
<img ngf-src="banners.medium2" ngf-background="banners.medium2" alt="" class="flip-img height-25" ng-if="banners.medium2">
</div>
</div>
<!-- /.flip-front -->
<div class="flip-back horizontal banner-box sponsor-banner-text height-25" ng-class="{'app-box-shadow': expandText320}">
<span ng-class="{'hidden': expandText320}">back flip</span><span ng-class="{'hidden': !expandText320}">lorem ipsum lorem lorem ipsum lorem ipsum lorem ipsum</span>
</div>
<!-- /.flip-back horizontal -->
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
</div>
<!-- /.flipper -->
<a href="" class="default-btn more-info-plus" ng-click="expandText320 = !expandText320"><i class="fa" ng-class="{'fa-minus-square':expandText320, 'fa-plus-square': !expandText320}"></i></a>
</div>
<!-- /.box-flip-container horizontal -->
</div>
<!-- /.col-xs-5 one box-->
<div class="col-xs-2 no-pad-left-right">
<div class="box-flip-container horizontal dimension120x60">
<div class="flipper height-25" ngf-drop ngf-select ngf-change="upload($files, '120x60')" ngf-drag-over-class="dragover" ngf-multiple="false" ngf-allow-dir="false" accept="image/*">
<div class="banner-box flip-front">
<div class="sponsor-banner-text relative-box height-25">120x60
<img ngf-src="banners.small1" ngf-background="banners.small1" alt="" class="flip-img height-25" ng-if="banners.small1">
</div>
</div>
<!-- /.flip-front -->
<div class="flip-back horizontal banner-box sponsor-banner-text height-25" ng-class="{'app-box-shadow': expandText12060}"><span ng-class="{'hidden': expandText12060}">back flip</span><span ng-class="{'hidden': !expandText12060}">lorem ipsum lorem ipsum lorem ipsum</span>
</div>
<!-- /.flip-back horizontal -->
</div>
<!-- /.flipper -->
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
<a href="" class="default-btn more-info-plus" ng-click="expandText12060 = !expandText12060"><i class="fa" ng-class="{'fa-minus-square':expandText12060, 'fa-plus-square': !expandText12060}"></i></a>
</div>
<!-- /.box-flip-container horizontal -->
</div>
<!-- /.col-xs-2 one box-->
<div class="col-xs-5">
<div class="box-flip-container horizontal dimension320x50 float-right-medium">
<div class="flipper height-25" ngf-drop ngf-select ngf-change="upload($files, '300x50')" ngf-drag-over-class="dragover" ngf-multiple="false" ngf-allow-dir="false" accept="image/*">
<div class="banner-box flip-front">
<div class="relative-box sponsor-banner-text height-25">300x50
<img ngf-src="banners.medium1" ngf-background="banners.medium1" alt="" class="flip-img height-25" ng-if="banners.medium1">
</div>
</div>
<!-- /.flip-front -->
<div class="flip-back horizontal banner-box sponsor-banner-text height-25" ng-class="{'app-box-shadow': expandText300}"><span ng-class="{'hidden': expandText300}">back flip</span><span ng-class="{'hidden': !expandText300}">lorem ipsum lorem ipsum lorem ipsum</span>
</div>
<!-- /.flip-back horizontal -->
</div>
<!-- /.flipper -->
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
<a href="" class="default-btn more-info-plus" ng-click="expandText300 = !expandText300"><i class="fa" ng-class="{'fa-minus-square':expandText300, 'fa-plus-square': !expandText300}"></i></a>
</div>
<!-- /.box-flip-container horizontal -->
</div>
<!-- /.col-xs-5 one box-->
</div>
<!-- /.row -->
CSS：
/*********************
* flip animation
*********************/
.flipper {
position: relative;
padding-bottom: 20px;
margin-top: 10px;
width: 100%;
text-align: center;
cursor: pointer;
&.dragover {
outline: 2px dashed $active-link-color;
}
}
.flip-front,
.flip-back {
@include transition-property(transform);
@include transition-duration(0.4s);
@include transition-timing-function(ease-in);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
word-wrap: break-word;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
padding-left: 5px;
padding-right: 5px;
}
.flip-back {
z-index: 2;
&.horizontal {
@include transform(rotateY(-180deg));
}
&.vertical {
@include transform(rotateX(-180deg));
}
}
.box-flip-container {
position: relative;
&.horizontal {
&:hover {
.flip-front {
@include transform(rotateY(-180deg));
}
.flip-back {
@include transform(rotateY(0deg));
}
}
}
&.vertical {
&:hover {
.flip-front {
@include transform(rotateX(-180deg));
}
.flip-back {
@include transform(rotateX(0deg));
}
}
}
}
在 iPad mini/Safari 中，如果我在其中一个区域上传，文件就会上传。但是如果我点击另一个区域并选择一张照片，前一个区域会再次上传。我必须再次单击新区域才能将文件上传到我想要的位置。我必须双击新区域才能在该区域上传文件，或者有时我必须单击多次。
在 iPad mini/Chrome 中：我需要在同一区域上传 2 次照片，以便您看到。如果你上传一次，它不会显示。
我认为这可能是悬停状态的错误，因为不知何故，如果您单击一次 div，图像会翻转，如果您单击另一个 div，则初始 div 会翻转而新的 div 根本不会翻转...但是我该如何解决这个问题？
您能否告知这是插件错误还是我的代码中的某些内容？
谢谢你和最好的问候，米海