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/