我正在使用gridster创建一个链接网格。点击链接时应该能正常工作。问题是它在拖动后也会被点击。拖动后如何阻止它被单击?
请检查:http://jsfiddle.net/b_m_h/tr4cU/
<div class="gridster">
<ul id="reszable">
<li data-row="1" data-col="1" data-sizex="1" 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"><a href="http://google.com" target="_blank">LINK</a></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>
</ul>
</div>
Js:
$(function(){
$(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [100, 100]
});
var gridster = $(".gridster ul").gridster().data('gridster');
});
不知道是否有内置的东西,因为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');
FIDDLE
我不确定这是否有帮助,但只是为了一个想法
与其让整个网格成为可点击的,为什么不只使用链接作为可点击的呢,我的意思是
<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>
draggable: {
start: function(event, ui) {
dragged = 1;
// DO SEOMETHING
}
}
...
if(!dragged){
// DO SOMETHING
}
// RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
dragged = 0
如何避免在拖动具有可点击内容的gridster.js小部件后触发点击事件?
我认为该链接回答了相同的问题
$(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');
});
我已经更新了你的小提琴http://jsfiddle.net/tr4cU/6/