如何避免在拖动带有可点击内容的 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.

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><a href=''>
内容</div></a></li>

所以这就是我面临的问题，当我停止并释放拖动时，它会调用 div 中的单击，我怎么能只拖动 div，但在拖动停止和释放后不调用单击.我不希望它在拖动后重定向到另一个页面(用户拖动并释放..因为拖动时需要单击div，同时可以单击div，所以当停止和释放拖动时，它将调用点击)

$(function(){//DOM 就绪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');//我试过但失败了gridster.draggable.stop(){onclick = "假";}//gridster.resize_widget($('.gridster li').eq(0), 1,1);});

或者任何人都可以提供有关如何调用或使用gridster提供的功能的提示

<块引用>

draggable.stop: function(event, ui){} 拖动停止时的回调.

我想这里会有一些实现.

初步解决方案，但仍无法正常工作

 var gridster ,draggable ;$(函数(){gridster = $(".gridster > ul").find("> li ").click(function(e){! 可拖动 &&alert(1)//ipad2 ，不显示警报可拖动=0；警报(可拖动)；}).结尾().gridster({widget_margins: [5, 5],widget_base_dimensions: [128, 130],min_cols: 10,min_rows: 20,serialize_params: 函数($w, wgd) {返回 {id:wgd.el[0].id//,col: wgd.col//,行: wgd.row};}，可拖动:{开始:功能(事件，用户界面){//alert("hekio);");可拖动=1；}}}).data('gridster');//gridster.disable();//gridster.resize_widget($('.gridster li').eq(0), 1,1);如果(！拖){$("a#blue.grid").click(function(){window.location = '../yokotachi/category_list.php?category=yokosmart';});}//RESET DRAGED 因为单击事件在拖动停止后触发拖动 = 0});

解决方案

我用触发器变量修复了它:var dragged = 0将以下内容添加到您的 gridster 初始化中，在拖动开始时将变量设置为 1:

<代码>...可拖动:{开始:函数(事件，用户界面){拖动 = 1;//做一些事情}}……

在同一个对象的点击事件中，检查:

<代码>...如果(！拖){//做一点事}//RESET DRAGED 因为单击事件在拖动停止后触发拖动 = 0……

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>

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);

});

or anyone can give hints about how to invoke or use the function that provided by gridster

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
    });

解决方案

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
        }
    }
....

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屋！