2

我正在使用 Gridster ( http://gridster.net/ )，它能够将内容拖到li. 在我li有一个可点击的 div。

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

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

$(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提供的功能的提示

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

我想这里会有一些实现。

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

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

6 回答 6

13

问题是click事件在mouseup传递给draggable.stop.

因此，您需要短暂捕获该单击事件并停止传播，然后在完成后解除捕获，以便人们随后可以单击该项目。

您可以这样做（单击工作 JSFiddle）：

$(document).ready(function () {
  // Basic event handler to prevent event propagation and clicks
  var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); };
  $(element).gridster({
    draggable: {
      start: function (event, ui) {
        // Stop event from propagating down the tree on the capture phase
        ui.$player[0].addEventListener('click', preventClick, true);
      },
      stop: function (event, ui) {
        var player = ui.$player;
        setTimeout(function () {
          player[0].removeEventListener('click', preventClick, true);
        });
      }
    }
  });
})

这是一个比当前接受的答案更好的解决方案，因为它避免了跨多个组件/处理程序设置/检查状态的变量。

于 2014-08-21T16:54:09.517 回答
5

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

...
    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
....
于 2013-01-18T08:05:35.160 回答
1

你应该试试：

var gridster = $(".gridster ul").gridster().data('gridster');
gridster.disable();
于 2013-01-13T14:52:31.823 回答
0

在不深入研究 JS 的情况下，添加onclick = "return false;"到您的<a>标签应该会阻止点击触发。

要停止拖动，请尝试：

gridster.draggable.stop(){
   return false;
}

或者

gridster.draggable.stop(e){
   e.preventDefault();
}
于 2013-01-13T05:49:20.867 回答
0

现在有一个本地支持来禁用 Gridster 上的拖放操作。

$(".gridster ul").gridster().data('gridster').disable();

于 2013-07-11T19:05:44.703 回答
0

对于那些遇到此线程并使用 Angular 在 Gridster2 中寻找解决方案的人，以下内容基于 Alastair Maw 的回答，但通过使用 initCallBack 选项更新为适用于 Gridster2。

ngOnInit() {
    const preventClick = (e) => { e.stopPropagation(); e.preventDefault(); };
    this.gridsterOptions = {
      initCallback: (gridster: GridsterComponentInterface) => {
        gridster.options = {
          draggable: {
            delayStart: 100,
            start: (event, ui) => {
              // Stop event from propagating down the tree on the capture phase
              setTimeout(() => {
                ui.el.addEventListener('click', preventClick, true);
              }, 100);
            },
            stop: (event, ui) => {
              setTimeout(() => {
                ui.el.removeEventListener('click', preventClick, true);
              });
            }
          }
        }
      }
    };
}
于 2021-08-18T00:42:24.693 回答