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

Question

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

    $(".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
    })

Answer 1

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

cancel: '#selector1, .selector-two'

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

Answer 2

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

handle: '.allow_drag_start'

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

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

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