Javascript 在拖动链接时防止“单击”
我正在使用gridster创建链接网格。当点击该链接时,该链接应能正常工作。问题是它在拖动后也会被单击。拖动后如何阻止单击它 请检查:Javascript 在拖动链接时防止“单击”,javascript,jquery,gridster,Javascript,Jquery,Gridster,我正在使用gridster创建链接网格。当点击该链接时,该链接应能正常工作。问题是它在拖动后也会被单击。拖动后如何阻止单击它 请检查: 我认为这个链接回答了同样的问题,我不知道是否有内置的东西,因为jQuery draggable有这样的选项,但是找不到任何与gridster类似的东西 您始终可以自己创建功能: $(".gridster ul").gridster({ widget_margins: [5, 5], widget_base_dimensions: [100, 1
我认为这个链接回答了同样的问题,我不知道是否有内置的东西,因为jQuery draggable有这样的选项,但是找不到任何与gridster类似的东西 您始终可以自己创建功能:
$(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [100, 100]
}).on({
mousedown: function(e) {
$(this).data({top: e.pageX, left: e.pageY});
},
mouseup: function(e) {
var top = e.pageX,
left = e.pageY,
ptop = $(this).data('top'),
pleft = $(this).data('left');
$(this).data('dragged', Math.abs(top - ptop) > 15 || Math.abs(left - pleft) > 15);
},
click: function(e) {
if ( $(this).data('dragged') ) e.preventDefault();
}
}, 'a');
我已经更新了你的小提琴我不确定这是否有用,但只是为了一个主意 与其让整个网格成为可点击的,为什么不只使用链接作为可点击的,我的意思是
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<p> <a href="http://google.com" target="_blank">LINK</a></p></li>
这样做会满足你的需要,你已经尝试过了,而且效果很好
<div class="gridster">
<ul id="reszable">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<p> <a href="http://google.com" target="_blank">LINK</a></p></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
-
谢谢,我喜欢你为小鼠标移动留出空白的方式。@BMH-谢谢,15像素通常足以构成一个拖动,如果不是,它总是可以更改的。tanks,网站上的版本不起作用。对于任何使用fiddle代码的人,不要忘记在css上添加“ol,ul{list style:none;}”,它在fiddle normalize中,这就是为什么它不在gridster css中。正在兼容模式下工作。感谢@adeneo提供的宝贵提示。我还必须加上e.stopPropagation();在e.preventDefault()之上;在我的实际实现中,链接是一个充满整个网格的大图像。
$(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [100, 100]
}).on({
mousedown: function(e) {
$(this).data({top: e.pageX, left: e.pageY});
},
mouseup: function(e) {
var top = e.pageX,
left = e.pageY,
ptop = $(this).data('top'),
pleft = $(this).data('left');
$(this).data('dragged', Math.abs(top - ptop) > 15 || Math.abs(left - pleft) > 15);
},
click: function(e) {
if ( $(this).data('dragged') ) e.preventDefault();
}
}, 'a');
$(function(){ //DOM Ready
$(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [100, 100],
draggable: {
start: function(event, ui){
$("a").click(function(event) { event.preventDefault(); }) // prevent the click event when the drag started
},
}
});
$("#reszable > li").mouseleave(function(){
$("a").unbind('click'); // bind the click event again when the drag stopped
});
var gridster = $(".gridster ul").gridster().data('gridster');
});
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<p> <a href="http://google.com" target="_blank">LINK</a></p></li>
<div class="gridster">
<ul id="reszable">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<p> <a href="http://google.com" target="_blank">LINK</a></p></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>