通过jQuery拖放来防止点击事件

问题描述

我有一个页面上的元素是与jQuery的draggabe。这些元素有点击事件导航到另一个页面（例如普通链接）。

什么是最好的方式来防止点击放弃这样的元素，同时允许点击它不是拖放状态？

我有这个问题与可排序的元素，但认为是一个很好的解决方案的一般拖放。

我已经为自己解决了问题。之后，发现同样的解决方案，但也许有一个人有更好的方法来实现。

解决方案

解决方案是添加点击处理程序，阻止点击在拖动开始时传播。然后在执行drop后删除该处理程序。最后一个操作应该被延迟一点点防止工作。

可排序的解决方案：

  ... 
 .sortable（{
 ... 
 start：function（event，ui）{
 ui.item.bind（click .prevent，
 function（event）{event.preventDefault（）;}）; 
}，
 stop：function（event，ui）{
 setTimeout {ui.item.unbind（click.prevent）;}，300）; 
} 
 ... 
}）
  

可拖动的解决方案：

  ... 
 .draggable（{
 ... 
 start：function（event，ui）{
 ui.helper.bind（click.prevent，
 function（event）{ event.preventDefault（）;}）; 
}，
 stop：function（event，ui）{
 setTimeout（function（）{ui.helper.unbind（click.prevent ;}，300）; 
} 
 ... 
}）
  

I have an elements on page that are draggabe with jQuery. These elements have click event wich navigates to another page (ordinary links for example).

What is the best way to prevent click from firing on dropping such element, while allowing clicking it in not drag and drop state?

I have this problem with sortable elements, but think it is good to have solution for general drag and drop.

I've solved the problem for myself. After that found that same solution exists for Scriptaculous, but maybe someone have a better way to achieve that.

解决方案

Solution is to add click handler that will prevent click to propagate on start of drag. And then remove that handler after drop is performed. The last action should be delayed a bit for click prevention to work.

Solution for sortable:

...
.sortable({
...
        start: function(event, ui) {
            ui.item.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
        }
...
})

Solution for draggable:

...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})

这篇关于通过jQuery拖放来防止点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！