在拖动具有可点击内容的gridster.js小部件后,如何避免单击事件触发? [英] How do I avoid a click event firing after dragging a gridster.js widget with clickable content?
问题描述
我正在使用Gridster( http://gridster.net/)可以将内容拖动到li
.在我的li
中,有一个可点击的div.
I'm using Gridster (http://gridster.net/) which able to drag the content inside the li
. In my li
there is a clickable div.
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<a href=' '>
<div>
content
</div>
</a>
</li>
所以这是我面临的问题,当我停止并释放拖动时,它将在div中调用click,我如何才能拖动div,但在拖动stop& amp;之后不调用单击.我不希望它在拖动后重定向到另一个页面(用户拖动并释放..因为拖动时需要单击div,同时可以单击div,所以当停止并释放拖动时,它将调用点击)
so here is the problem I'm facing, when I stop and release the dragging, it will invoke the click in the div, how can I just dragging the div, but not invoking the click after drag stop&release. I do not want it to redirect to another page after dragging( user drag and release ..since when drag,it need to click the div,meanwhile, the div can be clicked, so when stop&release the drag, it will invoke the click )
$(function(){ //DOM Ready
var gridster = $(".gridster ul").gridster(
{
widget_margins: [5, 5],
widget_base_dimensions: [128, 130],
max_size_y: 2,
max_size_x: 2,
extra_cols: 6
}
).data('gridster');
//which i tried but failed
gridster.draggable.stop(){
onclick = "false";
}
// gridster.resize_widget($('.gridster li').eq(0), 1,1);
});
或者任何人都可以提供有关如何调用或使用gridster提供的功能的提示
or anyone can give hints about how to invoke or use the function that provided by gridster
draggable.stop:function(event,ui){}拖动停止时的回调.
draggable.stop: function(event, ui){} A callback for when dragging stops.
我想这里会有一些实现.
I guess there will be some implementation on here.
初始解决方案,但仍无法正常工作
initial solution but still not working yet
var gridster ,draggable ;
$(function () {
gridster = $(".gridster > ul").find("> li ").click(function(e){
!draggable && alert(1) //ipad2 ,not show alert
draggable=0;
alert(draggable);
}).end()
.gridster({widget_margins: [5, 5],
widget_base_dimensions: [128, 130],min_cols: 10,min_rows: 20
,serialize_params: function($w, wgd) {
return {
id: wgd.el[0].id
//,col: wgd.col
//,row: wgd.row
};
}
,draggable: {
start:function(event, ui){
// alert("hekio);");
draggable=1; }
}
}).data('gridster');
//gridster.disable();
// gridster.resize_widget($('.gridster li').eq(0), 1,1);
if(!dragged){
$("a#blue.grid").click(function(){
window.location = '../yokotachi/category_list.php?category=yokosmart';
});
}
// RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
dragged = 0
});
推荐答案
我使用触发器变量对其进行了修复:var dragged = 0 将以下内容添加到您的gridster初始化中,该初始化在拖动开始时将变量设置为1:
I fixed it with a trigger variable: var dragged = 0 Add the following to your gridster initialization which sets the variable to 1 on drag start:
...
draggable: {
start: function(event, ui) {
dragged = 1;
// DO SEOMETHING
}
}
....
在同一对象的click事件中,检查:
In your click event on the same object, check:
...
if(!dragged){
// DO SOMETHING
}
// RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
dragged = 0
....
这篇关于在拖动具有可点击内容的gridster.js小部件后,如何避免单击事件触发?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!