YUI3 Drag Drop Disable/Enable

Question

I have a div draggable using YUI3 code:

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

I need to be able to interact with other links within the node "dd-demo-rep" when it is not being dragged.

I want to be able to disable the DD code and then re-enable it when I am ready. This may happen different times so it needs to be able to toggle as needed.

I tried using the destroy() event {dd1.destory()}, and that works to stop it, but I was not able to get it working again. Is there a better way to do this ? Appreciate any help or advice.

Answer 1

You need to set the lock attribute of dd1 to true:

dd1.set('lock', true);

Setting lock to true stops the element from being draggable. Here's a runnable example:

<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>