blur event not firing on click of interactJs draggable elements

Question

I have input elements and draggables in a view, if I focus on any input element and click on draggable, the input element still has the focus.

How can I make draggable element click should work as expected?

// Initialize Interact.js Drag & Drop
    interact('.draggable').draggable({
        inertia: true,
        restrict: {
          restriction: "#visualizer-panel",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        onmove: function (event) {
          var target = event.target,
              // keep the dragged position in the data-x/data-y attributes
              x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
              y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
    
          // translate the element
          target.style.webkitTransform =
          target.style.transform =
            'translate(' + x + 'px, ' + y + 'px)';
    
          // update the posiion attributes
          target.setAttribute('data-x', x);
          target.setAttribute('data-y', y);
        },
        onend: function(event) {
            console.log(event);
        }
    });

    interact('.dropzone').dropzone({
        accept: '.draggable',
        overlap: 0.01,

        // add / remove dropzone feedback
        ondropactivate: function (event) {
            event.target.classList.add('drop-active');
        },
        ondropdeactivate: function (event) {
            event.target.classList.remove('drop-active');
        },

        // add / remove dropzone feedback
        ondragenter: function (event) {
            var draggableElement = event.relatedTarget,
                dropzoneElement = event.target;
            dropzoneElement.classList.add('drop-target');
            draggableElement.classList.add('can-drop');
        },
        ondragleave: function (event) {
            event.target.classList.remove('drop-target');
            event.relatedTarget.classList.remove('can-drop');
        },

        // drop successful
        ondrop: function (event) {
            console.log(event);
        }
    });

#visualizer-panel .leftStuff {
    float: left;
}
#visualizer-panel .rightStuff {
    float: right;
}

#visualizer-panel .draggable:hover {
    cursor: move;
}

/* Drag & Drop */
#visualizer-panel .draggable {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
#visualizer-panel .drop-active { border-color: red; }
#visualizer-panel .drag-drop.can-drop { background-color: #4e4; }
#visualizer-panel .drop-target {  background-color: #29e;  }

<script src="http://code.interactjs.io/interact-1.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="visualizer-panel">
    <div class="leftStuff panel">
        <div class="panel-heading">
            <h4 class="panel-title">Draggables</h4>
            <input />
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item draggable">asdf</li>
                <li class="list-group-item draggable">bbq</li>
            </ul>
        </div>
    </div>
    <div class="rightStuff panel">
        <div class="panel-heading">
            <h4 class="panel-title">Drop Areas</h4>
        </div>
        <div class="panel-body">
            <div class="dropzone">drop stuff here</div>
            <div class="dropzone">drop more stuff here</div>
        </div>
    </div>
</div>

Demo http://jsfiddle.net/hf27hn0c/46/

Answer 1

I found the solution by digging into the interactJs API, there is an option preventDefault to set the desired behavior on click of draggable.

http://interactjs.io/api/#Interactable.preventDefault

// Initialize Interact.js Drag & Drop
    interact('.draggable').preventDefault('never').draggable({
        inertia: true,
        restrict: {
          restriction: "#visualizer-panel",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        onmove: function (event) {
          var target = event.target,
              // keep the dragged position in the data-x/data-y attributes
              x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
              y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
    
          // translate the element
          target.style.webkitTransform =
          target.style.transform =
            'translate(' + x + 'px, ' + y + 'px)';
    
          // update the posiion attributes
          target.setAttribute('data-x', x);
          target.setAttribute('data-y', y);
        },
        onend: function(event) {
            console.log(event);
        }
    });

    interact('.dropzone').dropzone({
        accept: '.draggable',
        overlap: 0.01,

        // add / remove dropzone feedback
        ondropactivate: function (event) {
            event.target.classList.add('drop-active');
        },
        ondropdeactivate: function (event) {
            event.target.classList.remove('drop-active');
        },

        // add / remove dropzone feedback
        ondragenter: function (event) {
            var draggableElement = event.relatedTarget,
                dropzoneElement = event.target;
            dropzoneElement.classList.add('drop-target');
            draggableElement.classList.add('can-drop');
        },
        ondragleave: function (event) {
            event.target.classList.remove('drop-target');
            event.relatedTarget.classList.remove('can-drop');
        },

        // drop successful
        ondrop: function (event) {
            console.log(event);
        }
    });

#visualizer-panel .leftStuff {
    float: left;
}
#visualizer-panel .rightStuff {
    float: right;
}

#visualizer-panel .draggable:hover {
    cursor: move;
}

/* Drag & Drop */
#visualizer-panel .draggable {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
#visualizer-panel .drop-active { border-color: red; }
#visualizer-panel .drag-drop.can-drop { background-color: #4e4; }
#visualizer-panel .drop-target {  background-color: #29e;  }

<script src="http://code.interactjs.io/interact-1.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="visualizer-panel">
    <div class="leftStuff panel">
        <div class="panel-heading">
            <h4 class="panel-title">Draggables</h4>
            <input />
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item draggable">asdf</li>
                <li class="list-group-item draggable">bbq</li>
            </ul>
        </div>
    </div>
    <div class="rightStuff panel">
        <div class="panel-heading">
            <h4 class="panel-title">Drop Areas</h4>
        </div>
        <div class="panel-body">
            <div class="dropzone">drop stuff here</div>
            <div class="dropzone">drop more stuff here</div>
        </div>
    </div>
</div>

Demo http://jsfiddle.net/hf27hn0c/47/