在jquery draggable元素上指定多个取消选项

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

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

cancel: '#selector1, .selector-two'

请注意逗号（,）将引号内的每个选择器分开。

Answer 2

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

handle: '.allow_drag_start'

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

这有一个额外的骗局，我最近发现。如果您的网站正在使用例如。 http://touchpunch.furf.com/将鼠标事件转换为touchevents，cancel实际上取消了所有内容，不仅可以拖动，还可以触摸设备的原生滚动和双指缩放缩放。就我而言，我希望滚动和缩放可以处理除句柄之外的所有其他元素。

一般来说，我认为应该使用handle，cancel有点解决方法。