- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有可吸取和可转换的元素。
当用户点击其他元素时,元素变为可药物化:
$('.bank-deposit-row').on('click', function() {
$('.reconciliation-modal').show();
$('.cit-pickup-row').addClass('draggable');
$('.draggable').draggable({
revert:"invalid",
drag: function(event, ui){
var dragTarget = this;
$('.modal-droppable-area').droppable({
tolerance: "fit",
drop: function() {
alert: ("Dropped!");
}
})
}
});
})
为什么droppable element看不到draggable element?
我的可放置元素 - 是模态窗口中的区域。
UPD
元素,它是目标(当我单击该行时 - 模态窗口变得可见并激活可拖动元素。
<div class="row table-row bank-deposit-row">
<div class="col-sm-2 table-col">08-09-2017</div>
<div class="col-sm-4 table-col">Deposit G4S - 0123456789</div>
<div class="col-sm-2 table-col">EURO</div>
<div class="col-sm-2 table-col">14.055,00</div>
<div class="col-sm-2 table-col"></div>
</div>
可拖动元素:
<div class="row table-row cit-pickup-row">
<div class="col-sm-2 table-col">08-09-2017</div>
<div class="col-sm-4 table-col">The Boathouse<br>Javastraat</div>
<div class="col-sm-2 table-col">EURO</div>
<div class="col-sm-2 table-col">14.055,00</div>
<div class="col-sm-2 table-col"></div>
</div>
和可放置元素:
<div class="reconciliation-modal col-sm-5">
<div class="modal-header col-sm-12">
<div class="row main-modal-header">
<h2 class="col-sm-8">Reconcile</h2>
<button class="close-btn">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="modal-semi-header row">
<div class="col-sm-2">Date</div>
<div class="col-sm-4">Description</div>
<div class="col-sm-2">Currency</div>
<div class="col-sm-2">Amount</div>
<div class="col-sm-2">Reconciled</div>
</div>
<div class="modal-semi-header-content row">
<div class="col-sm-2">07-09-2017</div>
<div class="col-sm-4">Deposit G4S - 0123456789</div>
<div class="col-sm-2">EURO</div>
<div class="col-sm-2">14.055,00</div>
<div class="col-sm-2"></div>
</div>
</div>
<div class="modal-droppable-area col-sm-12">
<div class="droppable-content">
Drag transactions here
</div>
</div>
<div class="modal-footer row">
<button class="modal-btn-save col-sm-3">Save & Close</button>
<div class="float-right col-sm-4">Discrepancy: <span class="discrepancy-sum">3.650</span></div>
</div>
</div>
此处 .modal-droppable-area
- 是区域,我不会在其中放置可拖动元素。CSS
所有这些:
.se-row .reconciliation-block {
max-width: 100%;
width: 48%;
float: left;
padding-left: 15px;
padding-right: 15px;
}
.reconciliation-block.float-right{
margin-right: 2%;
float: right;
}
.reconciliation-block .se-body {
padding: 0px 0px;
min-height: 600px;
}
.reconciliation-block .table-head-col {
color:#888;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
text-transform: uppercase;
padding: 23px 17px 5px 5px;
color: #888;
background:#f9f9f9;
min-height: 70px;
}
.reconciliation-block .se-content .table-body .table-row{
border-bottom: 1px solid #dfdfdf;
padding-top: 2%;
margin-left:0;
margin-right: 0;
}
.reconciliation-block .se-content .table-body .table-col {
padding: 15px 17px 12px 5px;
}
.reconciliation-block .se-content .table-body .table-row:hover,
.reconciliation-block .se-content .table-body .table-row:active,
.reconciliation-block .se-content .table-body .table-row:focus {
background-color: yellow;
cursor: pointer;
z-index: 1000;
}
.reconciliation-modal {
display:none;
position: absolute;
z-index: 999;
left: 10%;
top:30%;
right:0;
bottom:0;
max-height: 500px;
background: #fff;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.reconciliation-modal .close-btn {
float: right;
text-align: right;
}
.reconciliation-modal .modal-droppable-area {
padding-top: 25%;
padding-bottom: 25%;
text-align: center;
background: #cacaca;
}
最佳答案
我认为问题出在z-index
。
尝试将 z-index
添加到 .draggable
类的 CSS。
关于javascript - jQuery droppable 和 draggable 元素看不到对方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46191404/
我一直在尝试处理一个类项目,在该项目中我必须设置一个面向 GUI 的转换程序,并且我试图将数据从我的类的方法传递到 ActionListener,但监听器是告诉我文本字段不存在。它位于同一个包和类中,
我在服务器上有两个版本的 PHP(Centos 6.8) - 5.6 和 7.1 我的 Nginx 使用 php7.1,它不是默认的 PHP 解释器。 经过一番与 yum 的斗争后,我安装了 php7
我正在尝试为 BEAGLE 安装 OpenCL .首先,我下载了 intel_sdk_for_opencl_applications_2020.3.494.tar.gz 来自 here .然后我解压并
我想知道为什么我在 controlPanel 中看不到 topPanel 这是我的代码: import java.awt.BorderLayout; import java.awt.Color; im
在我的 urls.py 中,我有以下内容: urlpatterns = patterns('', # Examples: #url(r'^$', 'welcome_page.home'
非常感谢大家的帮助! 在 GetProductByID 下,我收到一条错误消息“int does not contain a definition for FirstOrDefault”。 using
1) 我已经通过 my computuer -> System variables; 设置了变量 CLASSPATH 2) 重新启动控制台并键入 echo %CLASSPATH%,CLASSPATH
我已经看过这篇文章了PHP doesn't see mysql extension ,但这对我没有帮助。 我使用: Windows Seven(在虚拟机中为 32 位,在真实电脑上为 64 位) 带
当我尝试通过输入 python3 来验证 Python3 是否可以看到 Django 时其次是 import django进入终端(这样我就可以打印 Django 的版本号),我得到以下错误: Tra
我已经使用 easy_install 安装了 pygraphviz但是当我启动 python 时出现错误: >>>import pygraphviz as pgv Traceback (most re
在向 Microsoft 报告之前,我想在这里问一下。我有一个问题,我无法看到我的 WinUI 3 应用程序的实时可视化树。我什至看不到应用程序内工具栏。我可以在 WPF 和 UWP 应用程序中看到,
我对缺乏基本的了解和 内。 我希望看到 39 个 svg 子元素,100 像素高,每个子元素中都有清晰的文本。 http://jsfiddle.net/pn5sj8ge/ 最佳答案 发生这种情况的原因
我正在尝试设置一个新的持续集成服务器,该服务器利用 Phing 和 PHPUnit 自动运行测试用例。 我已经用 Pear 安装了 Phing: pear channel-discover pear.
lua -e "print(package.path)" ./?.lua;/usr/share/lua/5.1/?.lua;/usr/share/lua/5.1/?/init.lua;/usr/lib
我刚刚从 https://github.com/llvm/llvm-project.git 安装了 clang++ 和 libc++ .尝试运行时: clang main.cpp -stdlib=li
我一直在使用 Highstock 图表,我注意到当图表中有很多点时,无法使用工具提示查看最后一个点: 您可以看到工具提示显示了 5 月 9 日的点,而还有一个显示 5 月 10 日的点(正如您在范围选
This question already has answers here: error_log message is truncated when using print_r (5个答案) 1年前
我在编写 Selenium 测试来检查我的应用程序时遇到问题。我想测试的是,当用户输入正确的登录名/密码时,会显示正确的页面并且用户已登录。 主要问题是我的登录表单是作为 AngularJS 指令生成
我正在尝试在 Azure 服务上发布我的 ASP.NET Core 应用程序。这有效,但是当我尝试使用应用程序功能时,我收到消息 Your App Service app is up and runn
在我的 ionic 应用程序中,我有一个功能,用户应该在应用程序的导航栏中看到水平点线,单击它们,然后应该出现一个弹出菜单,其中包含两个菜单项(添加到收藏夹并添加评论)。下图说明了我的观点。 问题是这
我是一名优秀的程序员,十分优秀!