拖动链接时防止“单击”答案

【问题标题】：Prevent `click` while the link is dragged拖动链接时防止“单击”
【发布时间】：2013-08-19 10:36:51
【问题描述】：

我正在使用 gridster 来制作链接网格。单击链接时，该链接应该可以正常工作。问题是它在拖动后也会被点击。拖动后如何阻止它被点击？

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

});

【问题讨论】：

标签： javascript jquery gridster

【解决方案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

【讨论】：

谢谢，我喜欢你为鼠标移动留出余量的方式。
@BMH - 谢谢，15 像素通常足以构成拖动，如果不是，则可以随时更改。
坦克，网站上的版本不工作。对于任何使用小提琴代码的人，不要忘记在 css 上添加“ol，ul { list-style:none;}”，它在小提琴中标准化，这就是为什么它不在 gridster css 中。
某人创建了一个适用于 IE8 的版本，stackoverflow.com/questions/12541423/alternative-to-gridster。在兼容模式下工作。
感谢@adeneo 的精彩提示。我还必须添加 e.stopPropagation();在 e.preventDefault() 之上；让它工作。

【解决方案2】：

我不确定这是否有帮助，但只是为了一个想法

与其将整个烤盘设为可点击，不如只使用链接作为可点击，我的意思是

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

【讨论】：

在我的实际实现中，链接是一个充满整个网格的大图像。

【解决方案3】：

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?

我认为该链接回答了同样的问题

【讨论】：

【解决方案4】：

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

【讨论】：