在 jquery 可拖动元素上指定多个取消选项答案

【问题标题】：Specifying multiple cancel options on jquery draggable elements在 jquery 可拖动元素上指定多个取消选项
【发布时间】：2012-04-27 08:27:00
【问题描述】：

如上图所示，我只想让用户在点击区域时拖动元素，标记为“允许拖动”，所有其他区域不允许拖动，标记为“禁用拖动”。以下是我目前拥有的代码。只有当我无法将多个选择器传递给取消选项时，它才能正常工作。我试过传递一个对象和空格分隔的扇区，但它不起作用。我究竟做错了什么？请帮忙。

    $(".e-note").draggable({
        stop: function(e, ui) {
            // alert(ui.position['top']);
        },
        cursor: 'move',
        opacity: 0.4,
        cancel: '.e-note-body', // How do i pass more than one selectors here?
        distance:20
    })

【问题讨论】：

标签： jquery jquery-ui draggable

【解决方案1】：

您可以提供multiple selector 来组合多个选择器：

cancel: '#selector1, .selector-two'

注意逗号 (,) 在引号内分隔每个选择器。

【讨论】：

【解决方案2】：

或者，如果您有一个复杂的布局和非常多的元素应该“取消”拖动，您可以使用 handle 选项而不是 cancel：

handle: '.allow_drag_start'

这样你根本不需要使用cancel。

这还有一个我最近发现的问题。如果您的网站正在使用例如。 http://touchpunch.furf.com/ 将鼠标事件转换为触摸事件，cancel 真的取消了一切，不仅是拖动，还包括触摸设备的原生滚动和两指捏缩放。在我的例子中，我希望滚动和缩放能够作用于除手柄之外的所有其他元素。

一般来说，我认为应该使用handle，而cancel 是一种解决方法。

【讨论】：