Question

我有一个使用YUI3代码的div draggable：

dd1 = new Y.DD.Drag({
    node: '#dd-demo-rep'
}).plug(Y.Plugin.DDConstrained, {
    constrain2node: '#container'
});

我需要能够与节点内的其他链接进行交互＆＃34; dd-demo-rep＆＃34;当它没有被拖动时。

我希望能够禁用DD代码，然后在我准备好后重新启用它。这可能发生在不同的时间，因此需要能够根据需要进行切换。

我尝试使用destroy（）事件{dd1.destory（）}，这可以阻止它，但我无法让它再次运行。有一个更好的方法吗？感谢任何帮助或建议。

Answer 1

您需要设置lock attribute of dd1 to true：

dd1.set('lock', true);

将lock设置为true会阻止元素被拖动。这是一个可运行的例子：

＆＃13;

<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>

<button id="toggleLock">Toggle Lock</button>

<div id="container" style="height: 200px; width: 200px; border-style: solid;">
  <span id="drag" style="border-style: dotted;">Draggable</span>
</div>

<script type="text/javascript">
  YUI().use('dd-drag', 'dd-constrain', function(Y) {
    var dd = new Y.DD.Drag({
      node: '#drag'
    }).plug(Y.Plugin.DDConstrained, {
      constrain2node: '#container'
    });
    Y.one('#toggleLock').on('click', function(event) {
      dd.set('lock', !dd.get('lock'));
    });
  });
</script>

＆＃13;

YUI3拖放禁用/启用

1 个答案: