링크가 드래그되는 동안 '클릭'금지

Question

나는 그리드 스터를 사용하여 링크 그리드를 만들고 있습니다. 링크를 클릭하면 정상적으로 작동합니다. 문제는 드래그 한 후에도 클릭됩니다. 드래그 한 후 클릭하지 못하게하려면 어떻게해야합니까?

확인하시기 바랍니다 : 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'); 

}); 

Answer 1

마십시오 응답 생각 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

Answer 2

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 

How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

내가 그 링크가 동일한 질문

Answer 3

$(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/

Answer 4

을 내가 그러나 단지에 대한,이 도움이 될 모르겠어요 아이디어

대신 완전 그리기 로 클릭 ddle, 왜, 무슨 뜻인지이 시도 한

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