个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我尝试拖动一个 div在网格系统行上，要找出他位于后面的女巫行，请放下它:
https://jsfiddle.net/johnidevo/08f83op9/5/
________________________________________________
droppable_area_(grids)__________________________
1row____________________________________________
2row____________________________________________
3row___-----------------------------------------
4row___| draggable <div> |
5row___| |
6row___-----------------------------------------
7row____________________________________________
(<div>'s)_______________________________________
我的代码如下:
jQuery( object ).draggable({
snap: ".selectable",
containment: "#droppable_area",
axis: "y",
drag: function( event, ui ){
console.log( jQuery( this ).parent() );
}
});
jQuery('.selectable').droppable({
drop: function( event, ui ) {
console.log( jQuery( this ) );
}
});
与 console.log( jQuery( this ) );什么时候draggable <div>只有一个行高大小它工作正常，如果大于 1 行大小它失败为什么？
最佳答案
发生的事情不是 IMO 的错误。我更改了“可拖动”元素的大小以匹配“可放置”元素的高度，然后选择了正确的 event.target.id。我认为问题是当“可拖动”高度大于“droppabe”高度时。 draggable 覆盖了多个 droppable 元素，此时，有多个 event.target.id 被覆盖。如果我是你，我会重新考虑我是如何完成这项任务的。另外，也许您可以尝试使用已经解决此问题的 jquery 插件。
为了展示这一点，我向可拖动元素添加了一个“.moveable”类，并为其指定了 20px 的高度，并为“.selectable”元素指定了相同的高度。正如预期的那样，显示了正确的 ID。
我有一个不可靠的解决方案可以帮助您解决问题 - 使用可放置公差:“指针”选项，演示了 40 像素的可拖动高度和 20 像素的可放置高度。但这并不可靠，因为您总是需要在元素的最底部或最顶部捕获可拖动对象——但这可能会帮助您找到一种方法或重新考虑您的方法。祝你好运!
$(document).ready(function() {
$(".moveable").draggable({
snap: ".selectable",
containment: "#day_kalendar",
axis: "y",
drag: function( event, ui ){
//console.log( event.target.id );
}
});
$(".selectable").droppable({
drop: function( event, ui ) {
$("#response").text(event.target.id);
console.log(this.id);
//var hfrom=$( this ).attr("data-hour");
//var hto=$( this ).attr("data-nexthour");
//$("#1463419359713").children("#eventHours").text( hfrom+" - "+hto );
},
over: function( event, ui) {
//console.log(event, ui);
},
tolerance: "pointer"
});
});.ui-selectable .ui-selected {
background-color: #a6c9e2;
}
.ui-selectable .ui-selecting {
background: #FECA40;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: none;
}
.ui-dialog-titlebar {
background: transparent;
border: none;
}
[class*="col-"] {
float: left;
padding: 0px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.row::after {
content: "";
clear: both;
display: block;
}
.text-right {
text-align: right;
}
.cornsilk {
background-color: #E0E0E0;
}
.forestgreen {
background-color: forestgreen;
}
.limegreen {
background-color: limegreen;
}
.dimgrey {
background-color: dimgrey;
color: white;
}
.border-up {
border-top: 1px solid white;
}
.border-up-dashed {
border-top: 1px dashed white;
}
.fix-border {
border-top: 1px solid dimgrey;
}
.newevent {
position: absolute;
top: 0;
left: 0;
margin: 0px;
width: 100%;
height: auto;
z-index: 1;
/*opacity: 0.7;*/
border-radius: 4px;
}
#console {
margin-top: 10px;
font-size: 9px;
background-color: white;
padding: 10px;
}
.selectable {
position: relative;
margin:0;
padding:0;
height: 20px;
}
.moveable {
padding:0;
margin:0;
height: 40px;
}
#response {
height: 20px;
}<script src="https://code.jquery.com/jquery.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id ="mainContainer">
<div class="container">
<div id="day_kalendar" class="ui-selectable">
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>10AM</span></div>
<div id="a1" data-hour="10 am" data-nexthour="10:30 am" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row">
<div class="col-1 dimgrey fix-border"> </div>
<div id="a2" data-hour="10:30 am" data-nexthour="11 am" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>11AM</span></div>
<div id="a3" data-hour="11 am" data-nexthour="11:30 am" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row">
<div class="col-1 dimgrey fix-border"> </div>
<div id="a4" data-hour="11:30 am" data-nexthour="12 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>12PM</span></div>
<div id="a5" data-hour="12 pm" data-nexthour="12:30 pm" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
<div id="a1463419359713" class="newevent moveable ui-draggable forestgreen" style="">
<span id="eventHours">12 pm - 2 pm</span>
<span id="eventTitle">(No title)</span>
<div class="ui-resizable-handle ui-resizable-s"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-1 dimgrey fix-border"> </div>
<div id="a6" data-hour="12:30 pm" data-nexthour="1 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>1PM</span></div>
<div id="a7" data-hour="1 pm" data-nexthour="1:30 pm" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row">
<div class="col-1 dimgrey fix-border"> </div>
<div id="a8" data-hour="1:30 pm" data-nexthour="2 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>2PM</span></div>
<div id="a9" data-hour="2 pm" data-nexthour="2:30 pm" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row">
<div class="col-1 dimgrey fix-border"> </div>
<div id="a10" data-hour="2:30 pm" data-nexthour="3 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>3PM</span></div>
<div id="a11" data-hour="3 pm" data-nexthour="3:30 pm" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row">
<div class="col-1 dimgrey fix-border"> </div>
<div id="a12" data-hour="3:30 pm" data-nexthour="4 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
<div class="row border-up">
<div class="col-1 dimgrey text-right"><span>4PM</span></div>
<div id="a13" data-hour="4 pm" data-nexthour="4:30 pm" class="col-11 cornsilk selectable ui-selectee">
<span> </span>
</div>
</div>
</div>
</div>
</div>
<div id="response">
</div>关于javascript - 使用 jQuery 小部件将 div 标签拖放到网格行上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37262268/
24
4
0
所以我使用一个带有整个 block 的标签作为链接，它是一个产品展示，所以你点击它会转到产品页面。现在我创建了一个标签作为链接到购物车页面的按钮。所以我让它工作，但是当我点击购物车按钮时，两个页面都会
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内
在Java中它是这样写的..当我移植这段代码时...意识到没有这样的东西 break 和continue . 我知道这些命令没有包含在内，因为在使用带有命令的 goto 时必须有一种更简洁的方法来执
我们有一个相当标准的发布过程，使用 Visual Source Safe 在发布之前标记构建。这允许我们在出现任何问题时从该标签中获取，并在需要更改时使用它进行分支。 我们有几个不同的项目，并且总是使
我必须创建一个搜索内容，其中包含搜索框、标题和段落描述。默认情况下，描述被禁用，当我输入一些与描述文本匹配的文本时，描述段落标签应该打开。一些匹配的演示是这样的: [ fiddle ][1] 但默认情
我一直在阅读有关 的文档标签，我似乎无法理解它与简单地使用 有何不同那是 display: none; 文档:template tag 例子 对比 例子
我需要一个脚本来复制当开关按钮打开时标记，当开关按钮关闭时删除标记。我需要一个简单的方法。这是开关按钮: 我试过这个: var change
JSF 是一个 MVC 框架，但我很困惑为什么我们已经有了这么多 HTML 标签还需要 JSF 标签。毫无疑问，JSF 简化了很多事情。我想进一步了解 JSF 中的模型 View 和 Controll
我在这个 website 上看到了那些 html 代码: Homepa
我添加了 photoswipe 插件，可以使用 搜索我的所有照片。标签，如果点击，照片就会变成全屏。我让它工作了，但现在我的导航栏(有 标签)在点击时会触发 photoswipe 插件。 在 ph
标签
我正在尝试截断显示自 的文本标签，但它不工作。我将样式应用于其他标签样式并且它确实有效(我看到的示例中没有一个使用 标签)。我想知道是否有人可以向我解释为什么会这样(我不是最擅长 HTML/CSS
HTML 是这样的: Menu 1 Menu 2 Sub menu 2
我可以更改 TextInputLayout 的位置 float 标签(底部 float 标签)吗？我需要为波纹管 float 标签设置正确的位置。 最佳答案 我解决了我的问题，这是我的 xml:
我的代码是 printMsg : function(data) { $("#message").html(data.bodyText); ... } 这里 data.body
我是 Scrapy 和 Xpath 的初学者，我正在寻找解析具有以下结构的网站 cat1 value1 value2
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
我必须从 xml 中解析数据。这是我的 xml- 或者它的 url 是:http://mobileecommerce.site247365.com/admin/catdata.xml News f
如何创建应该允许多行数据的标记。不要说使用textarea标签。我知道，但我只想 标记因为标签具有 value 属性。所以当我从 xml 文件获取值时，我应该使用 jquery 语法动态获取.. 最佳
我有一个页面使用我定义的某些样式。 在同一页面上，我刚刚导入了一个使用自己样式的外部 jQuery 插件，例如，包括 。被我自己覆盖的标签样式。 如何确保我的样式表中的样式不会覆盖 jQuery 插件
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
我是一名优秀的程序员,十分优秀！