jquery - gridlist - gridstack js template

¿Cómo evito que se active un clic en un evento después de arrastrar un widget gridster.js con contenido cliqueable?

Question

Estoy usando Gridster ( http://gridster.net/ ) que puede arrastrar el contenido dentro del li . En mi li hay un div que se puede hacer clic.

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

así que aquí está el problema al que me enfrento, cuando paro y lanzo el arrastre, invocaré el clic en el div, ¿cómo puedo simplemente arrastrar el div, pero no invocar el clic después de arrastrar detener y soltar? No quiero que redirija a otra página después de arrastrar (el usuario arrastra y suelta ... ya que al arrastrar, necesita hacer clic en el div, mientras tanto, se puede hacer clic en el div, así que cuando detenga y suelte el arrastre, invocará el clic)

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

});

o cualquiera puede dar pistas sobre cómo invocar o usar la función proporcionada por gridster

draggable.stop: function (event, ui) {} Una devolución de llamada para cuando se detiene el arrastre.

Supongo que habrá alguna implementación aquí.

solución inicial pero aún no funciona

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

Answer 1

Sin profundizar en el JS, agregue onclick = "return false;" a su etiqueta <a> debe detener el clic de desencadenar.

Para detener solo el arrastre, intente:

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

o

gridster.draggable.stop(e){
   e.preventDefault();
}

Answer 2

deberías probar eso:

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

Answer 3

Lo arreglé con una variable de desencadenante: var dragged = 0 Agregue lo siguiente a su inicialización gridster que establece la variable a 1 en el inicio de arrastre:

...
    draggable: {
        start: function(event, ui) {

            dragged = 1;
            // DO SEOMETHING
        }
    }
....

En su evento de clic en el mismo objeto, verifique:

...
    if(!dragged){
        // DO SOMETHING
    }
    // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
dragged = 0
....

Answer 4

Ahora hay un soporte nativo para deshabilitar la operación de arrastrar y soltar en Gridster.

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

Answer 5

El problema es que el evento click se mouseup después del evento mouseup que se pasa a draggable.stop .

Por lo tanto, debe atrapar brevemente ese evento de clic y detener su propagación, luego destrabarlo una vez que haya terminado para que las personas puedan hacer clic posteriormente en el elemento.

Puede hacerlo así ( haga clic para trabajar 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);
        });
      }
    }
  });
})

Esta es una solución mucho mejor que la respuesta actualmente aceptada, ya que evita tener una variable con el estado establecido / verificado en múltiples componentes / controladores.